@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.38.0 (2021-10-22)
clay-css mixin pattern (adbc3ed).btn-group inside .alert-inline and increase space between alert-inline buttons and close (48px) (1fb3075).alert-inline .alert-indicator so it's more centered with the text (6991050)alert-indicator and text should be 8px (abb1ad9)$alert-indicator-font-size instead of $alert-font-size when calculating spacing for the .alert-indicator (10809da)$badge-close Sass map to use newer keys for hover and focus (485862c)border-color is the wrong value. Table Row Variants scoped $border-color variable was overwriting global $border-color variable (834209a)clay-css mixin pattern (915c748).btn-group inside .alert-inline and increase space between alert-inline buttons and close (48px) (f6c7a02)modal-body should have border-top to create separation when components are inserted between modal-header and modal-body (b5b33c0)clay-darken, clay-lighten, clay-adjust-hue, clay-desaturate, clay-saturate, clay-mix, clay-blue, clay-green, clay-red. It converts CSS Custom Property fallback values to the correct type before running them through the Sass functions. (189e281)math-sign uses deprecated [@elseif](https://github.com/elseif) syntax, changed to [@else](https://github.com/else) if (bd22a48), closes #4353modal-body should have border-top to create separation when components are inserted between modal-header and modal-body (b3f648e)modal-header increase z-index so it appears on top of modal-body. modal-header border gets hidden by modal-body border due to last commit. (fd3ae71)node-sass and add new build file (80f6ec2)onLoadMore API to TreeView (ff972d7).badge, .badge-pill, and badge variants to use clay-badge-variant mixin (8c9d4eb).badge and badge variants to use clay-badge-variant mixin (a2b04b2)$enable-clay-color-functions-process-fallback and $cadmin-enable-clay-color-functions-process-fallback variables. This forces Clay color functions to return the CSS Custom Property instead of processing the fallback color and returning a hex value. (15a6bc1)clay-alert-variant adds option to configure .alert-indicator (0c9f913)clay-alert-variant adds option to pass in styles to .alert-indicator + .lead (ff5146b)clay-badge-variant (dc52ed1)FAQs
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.