pagination.md

Pagination

Provides horizontal navigation between pages of a collection.

Properties

ariaLabels

Adds aria-labels to the pagination buttons:

• previousPageLabel (string) - Previous page button.
• pageLabel (number => string) - Individual page button, this function is called for every page number that's rendered.
• nextPageLabel (string) - Next page button Example:

{
  nextPageLabel: 'Next page',
  previousPageLabel: 'Previous page',
  pageLabel: pageNumber => `Page ${pageNumber}`
}

Type:

PaginationProps.Labels {
  nextPageLabel?: string
  pageLabel?: (pageNumber: number) => string
  previousPageLabel?: string
}

Required: No

currentPageIndex

Index of the current page. The first page has an index of 1.

Type: Number

Required: Yes

disabled

If set to true, the pagination links will be disabled. Use it, for example, if you want to prevent the user from changing page before items are loaded.

Type: Boolean

Default: false

Valid values: true | false

Required: No

openEnd

Sets the pagination variant. It can be either default (when setting it to false) or open ended (when setting it to true). Default pagination navigates you through the items list. The open-end variant enables you to lazy-load your items because it always displays three dots before the next page icon. The next page button is never disabled. When the user clicks on it but there are no more items to show, the onNextPageClick handler is called with requestedPageAvailable: false in the event detail.

Type: Boolean

Default: false

Valid values: true | false

Required: No

pagesCount

Sets the total number of pages. Only positive integers are allowed.

Type: Number

Required: Yes

Events

onChange

Called when a user interaction causes a pagination change. The event detail contains the new currentPageIndex.

Detail type:

PaginationProps.ChangeDetail {
  currentPageIndex: number
}

Cancelable: No

onNextPageClick

Called when the next page arrow is clicked. The event detail contains the following:

• requestedPageAvailable (boolean) - Indicates whether the requested page is available for display. The value can be false when the openEnd property is set to true.
• requestedPageIndex (integer) - The index of the requested page.

Detail type:

PaginationProps.PageClickDetail {
  requestedPageAvailable: boolean
  requestedPageIndex: number
}

Cancelable: No

onPreviousPageClick

Called when the previous page arrow is clicked. The event detail contains the following:

• requestedPageAvailable (boolean) - Always set to true.
• requestedPageIndex (integer) - The index of the requested page.

Detail type:

PaginationProps.PageClickDetail {
  requestedPageAvailable: boolean
  requestedPageIndex: number
}

Cancelable: No

License Summary

The documentation is made available under the Creative Commons Attribution-ShareAlike 4.0 International License. See the LICENSE file.