@clayui/pagination
Advanced tools
import { Pagination, PaginationWithBasicItems, } from '$packages/clay-pagination/docs/index';
You can use ClayPagination.Ellipsis to display a dropdown with the specified page numbers as the dropdown's options.
ClayPagination.Item renders a basic Pagination item with content you provide.
Combining these you can reach the following result:
If you want to have a simple Pagination with integers as Pagination items you can use a simpler variant, PaginationWithBasicItems as you can see below:
3.36.0 (2021-09-23)
.btn-monospaced icons are off center by a pixel, use display: inline-flex to center and remove padding. If you need items to display inline in .btn-monospaced wrap them in a span tag. (ece0b5b)clay-enable-transitions should return $transitions instead of $transition (ca2d59a)clay-enable-transitions the variable $enable-transitions isn't available in Cadmin, use $enable instead (bd4e1c5)clay-button-variant adds option to style :disabled:focus, mostly for removing focus shadow on disabled .btn (bb942f9)clay-button-variant c-inner should work if mobile sizes are enabled (a0a005c)clay-button-variant remove outputting a.btn, button.btn { cursor: pointer; } we can pass it in directly to .btn (d5a1942)width property of the Menu (f29681e)closeOnClickOutside API support to DropDown (ece1061)expanderIcons API to change icons throughout the structure (455002c).btn-lg and .btn-sm to use clay-button-variant mixin (f6b3e95).btn-unstyled, .btn-monospaced, .btn-monospaced-lg, .btn-monospaced-sm, .btn-outline-borderless to use clay-button-variant mixin (4c16ce5).btn to use clay-button-variant mixin (617befc).btn, .btn-lg, .btn-sm, .btn-monospaced, .btn-monospaced-sm, .btn-monospaced-lg, .btn-unstyled, and .btn-outline-borderless to use clay-button-variant mixin (8481f19)starts-with($str1, $str2). A function that determines whether the string $str1 begins with the characters of the specified string $str2. (6ddef3e)clay-css if transition has a value other than null or none, it should output a prefers-reduced-motion media query (95b5c08)clay-css should output any CSS Custom Properties passed into it. (a78ddfa), closes #4252FAQs
ClayPagination component
The npm package @clayui/pagination receives a total of 1,880 weekly downloads. As such, @clayui/pagination popularity was classified as popular.
We found that @clayui/pagination demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.
Security News
Node.js v22.12.0 (LTS) debuts with require(esm) enabled by default, alongside security milestones and automated workflows for faster, more stable releases.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.