Components / Library version 3.26.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.

Properties Examples Events Accessibility

* Required property

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

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. Replaces the deprecated pageClicked.

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.

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.