
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@cagov/ds-pagination
Advanced tools
Pagination provides an easy way to navigate large ordered lists without lots of scrolling. It splits web content into numbered pages.
Pagination provides an easy way to navigate large ordered lists without lots of scrolling. It splits web content into numbered pages.
People can select a number to see another page. They can also select an arrow to move through pages.
Pagination always shows the first and last page in the series. It automatically shows links to previous and next pages in the series. Selecting a number or arrow shows new content without reloading the webpage.
Use the component wherever a long list of content could benefit from paged navigation. If you have more than 10 items, use pagination.
Pagination works well with:
Do not use pagination:
First, add the HTML.
<cagov-pagination data-current-page="5" data-total-pages="99"></cagov-pagination>
Next, register an event to respond to clicks.
const paginator = document.querySelector('cagov-pagination');
paginator.addEventListener('paginationClick', function (e) {
alert(`You requested page ${e.detail}.`);
});
Property | Value |
---|---|
Machine name | ds-pagination |
JavaScript | yes |
SCSS | ./src/scss/index.scss |
The instructions assume familiarity with npm package management tool, modern JavaScript techniques, and Sass.
npm i @cagov/ds-pagination
import
¹ or require
to include the component’s JavaScript in your page or compiler../dist/index.js
We recommend using a build system and bundling your JavaScript for faster performance. If you do not use a build system, you can include the code from our CDN with a script tag.
<script type="module" src="https://cdn.designsystem.webstandards.ca.gov/components/ds-pagination/v2.0.4/dist/index.js"></script>
The component tracks the current page and triggers custom events on page clicks. You can subscribe to events on this element to watch for clicks. This element does not modify outside content, responding to events and changing body content as desired is left up to your application logic. The following event format is sent on click:
new CustomEvent("paginationClick", { detail: currentPage, })
Here is an example of subscribing to that event, then taking actions to retrieve new page content based on the page number clicked and changing the url to reflect the new state
document.querySelector('cagov-pagination').addEventListener('paginationClick', function (e) {
writePostsHTML(e.detail);
history.replaceState({page: 3}, `${document.title} page ${e.detail}`, `?page=${e.detail}`)
}, false);
The following CSS variables are used in this component:
--s-sm
--border-1
--radius-2
--primary-700
--primary-900
--accent2-500
--white
--gray-50
--gray-100
All CSS variables define their own fallback value so you do not have to use additional CSS unless you want to change them. You may define your own value for the variable by adding your own style rules. Here is an example defining the global hex value for a CSS variable named “--primary-700”:
:root {
--primary-700: #165ac2;
}
aria-label
.nav
tag and has aria-label="Pagination”
added to it.As a component in Alpha status, this component must pass the following accessibility reviews every time a new version is published:
This component uses a custom element defined in JavaScript in addition to HTML and CSS. Edge, Firefox, Safari, and Chrome support custom elements. If the JavaScript for this component is not delivered or supported, the component will not display. This component does not currently perform the desired progressive enhancement because it is critical to site interaction. It uses CSS variables to inherit design token values. Token definitions are not required because these style rules provide fallback values.
This component accepts data attributes for the number of pages and current page. These changes are monitored and the component re-renders if these attributes change:
Name | Attribute name | Data type | Field type |
---|---|---|---|
Current page | data-current-page | string | Integer (default is 1) |
Total pages | data-total-pages | string | Integer (default is 1) |
It also accepts optional strings for all the text so it can be used in multiple languages:
Name | Attribute name | Data type | Field type |
---|---|---|---|
Previous | data-previous | string | Plain text (default is "<") |
Next | data-next | string | Plain text (default is ">") |
Page | data-page | string | Plain text (default is "Page") |
FAQs
Pagination provides an easy way to navigate large ordered lists without lots of scrolling. It splits web content into numbered pages.
The npm package @cagov/ds-pagination receives a total of 15 weekly downloads. As such, @cagov/ds-pagination popularity was classified as not popular.
We found that @cagov/ds-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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.