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.
Usage
- Navigating between pages of similar content
Sample
<calcite-pagination page-size="1" start-item="50" total-items="200"></calcite-pagination>
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 | Use this property to override individual strings used by the component. | {
next?: string;
previous?: string;
first?: string;
last?: string;
} | ||
numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
pageSize | page-size | Specifies the number of items per page. | number | 20 |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "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<void> |
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(): Promise<void> |