Pagination is used to denote and navigate between pages of content.
Overview
Pagination provides a way to display and browse large amounts of content. Intended to be placed at the bottom of a group of content, Pagination should not be used in place of Tabs or traditional top-level navigation.
Sample
Usage
- Navigating between pages of similar content
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next page number. If the current focus is the last page, focus will exit the component. |
Tab and Shift | Moves focus to previous item. If the current focus is the first item, focus will exit the component. |
Enter | Selects the currently focused page number. |
Space | Selects the currently focused page number. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | false |
| messageOverrides | Overrides individual strings used by the component. | Record<string, unknown> | undefined | ||
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | NumberingSystem | |
| pageSize | page-size | Specifies the number of items per page. | number | 20 |
| scale | scale | Specifies the size of the component. | Scale | "m" |
| startItem | start-item | Specifies the starting item number. | number | 1 |
| totalItems | total-items | Specifies the total number of items. | number | 0 |
Styles
| Name | Description |
|---|---|
| --calcite-pagination-color | Specifies the component's item color. |
| --calcite-pagination-color-hover | Specifies the component's item color when hovered or selected. |
| --calcite-pagination-color-border-hover | Specifies the component's item bottom border color when hovered. |
| --calcite-pagination-color-border-active | Specifies the component's item bottom border color when selected. |
| --calcite-pagination-background-color | Specifies the component's item background color when active. |
| --calcite-pagination-icon-color-background-hover | Specifies the component's chevron item background color when hovered. |
Events
| Name | Description | Behavior |
|---|---|---|
| calcitePaginationChange | Emits when the selected page changes. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| goTo | Set a specified page as active. | goTo(page: number | "start" | "end"): Promise<void> |
| nextPage | Go to the next page of results. | nextPage(): Promise<void> |
| previousPage | Go to the previous page of results. | previousPage(): Promise<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |