Components / Library Version 5.3.0

Pagination

The pagination component allows the user to move through a collection of items that have been split into pages. The component emits an event when a page number is clicked, and the event target value stores a reference to the page number. By listening for the event, the app can update the current page on state and the items displayed.

PropertiesExamplesAPIAccessibility

* Required property

current-page *
string
Required. The current page on display. The component will update accordingly.
items-per-page *
string
Required. The number of items per page.
total-items *
string
Required. The total number of items.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.
wmPaginationPageClicked
Emitted when the page number, previous, or next button is clicked. The event target stores the reference to the clicked page numbers.

Screen Readers

Screen readers announce the current page as the user tabs through the buttons in the component.

Keyboard Support

Key Function
Enter Space
  • Activates the page number, next button, or previous button, causing the current page to change and the viewing status to update.
  • The 'previous' button is disabled if the current page is the first page, and the 'next' button is disabled if the current page is the last page. If the 'previous' or 'next' button becomes disabled while in focus, focus will move to the first page number or last page number, respectively.
Tab
  • Moves focus to the next page number.
  • If focus is on the 'next' button, moves focus to next focusable element on page.
Shift + Tab
  • Moves focus to the previous page number.
  • If focus is on the 'previous' button, moves focus to previous focusable element on page.
Back to Top