@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.40.0 (2021-11-17)
atlas-variables.scss and base-variables.scss should be Sass partials. The CSS equivalent shouldn't be created since these files are only meant to be consumed by .scss files. (5aaa87e).c-kbd-group > .c-kbd, .c-kbd-group-sm > .c-kbd, and .c-kbd-group-lg > .c-kbd from their respective Sass map variables (5a9ad67), closes #4367clay-card-variant instead of deprecated mixins to generate styles for .card-type-asset, .image-card, .user-card , .card-type-directory (7a8b6f7).btn and .form-control z-index styles to input-group-prepend and input-group-append. Input Groups input disappears when focused inside a modal with iframe. (07f17ce)clay-card-variant instead of deprecated mixins to generate styles for .card-type-asset, .image-card, .user-card , .card-type-directory (e244162)$lexicon-icon, $lexicon-icon-sm, $lexicon-icon-lg, $lexicon-icon-xl Sass maps (efe1b80).btn and .form-control z-index styles to input-group-prepend and input-group-append. Input Groups input disappears when focused inside a modal with iframe. (64bd8c8)clay-label-variant hover and focus keys should be nested in href. The values are output for the selectors .label[href], .label[type], and .label[tabindex]. (c9e6442), closes #4383clay-card-variant adds option to output styles for: (c3e4149)clay-card-variant adds options to configure &.hover, &.focus, and &:disabled, &.disabled (16affad)clay-card-variant inlines the setter's that aren't providing any mapping from old keys to new keys (f0627a8)clay-card-variant moves the selector &.card, .card (b2f0f19)clay-card-variant should be able to output selectors for clay-card-type-asset-variant, but removes the default values generated in clay-card-type-asset-variant so it doesn't pollute the final CSS with unused rule-sets. (7bb6050)clay-card-variant should be able to output selectors for clay-card-type-asset, but removes the default values generated in clay-card-type-asset so it doesn't pollute the final CSS with unused rule-sets. (0a3bba0)clay-css should generate will-change property (b176c5b)clay-dropdown-item-variant adds option to output styles for ::before and ::after pseudo elements for default, hover, focus, active, .active, and disabled states (8369276), closes #4403clay-label-variant target [tabindex] instead of [tabindex="0"] so styles still apply when an element is disabled with negative tabindex (734470e)clay-link changes [@at-root](https://github.com/at-root) { button#{&} { :focus {} } } to &[type]:focus this causes issues for compound selectors. It will generate button.a .compound-selector instead of .a button.compound-selector. This fix targets the type attribute which should be on every button element. (5ca9e6d)clay-link to use newer property names and nesting (d6a25df).alert-fluid to use clay-alert-variant mixin (15f9355).alert-fluid to use clay-alert-variant mixin (3f3f34e)$cadmin-dropdown-menu and generate styles for .dropdown-menu using clay-dropdown-menu-variant (bbc031a).dropdown-toggle, .dropdown-subheader, .dropdown-caption, .dropdown-item-text, .dropdown-section, .dropdown-divider, .dropdown-action, and dropdown-menu positional utilities to use Sass maps instead of variables (1f11eba)$dropdown-menu Sass map and generate properties using it (a0d2382).dropdown-toggle, .dropdown-subheader, .dropdown-caption, .dropdown-item-text, .dropdown-section, .dropdown-divider, .dropdown-action, and dropdown-menu positional utilities to use Sass maps instead of variables (0cb1ce7).form-fieldset and .form-legend to provide alternative fieldset and legend styles without overriding all fieldset and legend elements (3fc7449)clay-alert-variant adds option to pass in styles to &.alert-dismissible, &.alert-dismissible .container-fluid, .alert-indicator .lexicon-icon, and .container-fluid (807c612)clay-css if parameter is not type map don't do anything (b994e78)clay-dropdown-menu-variant add customizing &::before, &::after, and &.show (57903de)clay-link and clay-button-variant adds option to customize inline-item, inline-item-before, inline-item-middle and inline-item-after in default, hover, focus, active, active-class, and disabled states. (84fb0d0), closes #4413fieldset and legend styles in Sass maps $fieldset and $legend (92e8254)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.