Components / Library Version 5.2.1
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.
* 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 |
|
Tab |
|
Shift + Tab |
|