@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.37.0 (2021-10-06)
$alert-*-btn variant Sass maps to use newer keys (ecdd38a)clay-alert-variant mixin to generate alert variant styles (9be70d7)alert-inline should have more space between text and top / bottom borders (29c4764)$alert-font-size to 0.875rem and change $alert-indicator-font-size to 1rem (21d33ed)sticker-light and sticker-dark (adcd19f)$alert-*-btn variant Sass maps to use newer keys and update $cadmin-alert-palette to use $alert-* variant Sass maps (6a4a100)clay-alert-variant mixin to generate alert variant styles (3410faf).form-feedback-group, .form-feedback-item,.form-feedback-indicator, and .form-text (db26016), closes #4298fieldset[disabled] .form-control should use values from the $cadmin-input Sass map and move rule-set closer to the .form-control rule-set (0504ff2)label.disabled should use properties declared in $cadmin-input-label map and move the label.disabled rule-set closer to the label rule-set (d00b97b)url("data:image/svg+xml,<svg></svg>") to use clay-svg-url (c1cd8a2)clay-form-control-variant to style Danger, Warning, Success readonly inputs instead of clay-button-variant (23ed8cb)fieldset[disabled] .form-control should use values from the $input Sass map and move rule-set closer to the .form-control rule-set (9ffc635)label.disabled should use properties declared in $input-label map and move the label.disabled rule-set closer to the label rule-set (0ea7c72)math-sign should return a negative calc value if a CSS custom property is passed in (e824c5d)escape-svg function (e8ffa5d)$enable-hover-media-query, $caret-width, $caret-vertical-align, $caret-spacing, $emphasized-link-hover-darken-percentage (54d39f9)$escaped-characters variable (9b93ca0)math-sign function (835a62a)clay-alert-variant mixin and deprecate Bootstrap's alert-variant mixin (a3f1722)treeview-dropping-bottom, treeview-dropping-inside and treeview-dropping-top (f0b4c5e).alert-inline, alert-autofit-stacked, alert-autofit-stacked-sm-down, alert-autofit-stacked-xs-down, alert-indicator-start (7738e78).alert-inline, alert-autofit-stacked, alert-autofit-stacked-sm-down, alert-autofit-stacked-xs-down, alert-indicator-start (b60b0c7)$cadmin-input-danger, $cadmin-input-warning, $cadmin-input-success, $cadmin-input-danger-select, $cadmin-input-warning-select, $cadmin-input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options (df1e426)$input-danger, $input-warning, $input-success, $input-danger-select, $input-warning-select, $input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options (c23c8f5)sticker-light now has a light font color and sticker-dark has a dark font color. All instances of sticker-light should be updated to use sticker-dark and all instances of sticker-dark should be updated to use sticker-light. If you do not want to make this change in your markup, you can revert back to the original styles with:$sticker-light-bg: $dark !default;
$sticker-light-color: $white !default;
$sticker-dark-bg: $dark !default;
$sticker-dark-color: $white !default;
See issue https://github.com/liferay/clay/issues/4310 for more context.
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
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
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.