Pagination

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

1
<calcite-pagination page-size="1" start-item="50" total-items="200"></calcite-pagination>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to next page number. If the current focus is the last page, focus will exit the component.
Tab and ShiftMoves focus to previous item. If the current focus is the first item, focus will exit the component.
EnterSelects the currently focused page number.
SpaceSelects the currently focused page number.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanfalse
messageOverridesUse this property to override individual strings used by the component.{ next?: string; previous?: string; first?: string; last?: string; }
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
pageSizepage-sizeSpecifies the number of items per page.number20
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
startItemstart-itemSpecifies the starting item number.number1
totalItemstotal-itemsSpecifies the total number of items.number0

Styles

NameDescription
--calcite-pagination-colorSpecifies the component's item color.
--calcite-pagination-color-hoverSpecifies the component's item color when hovered or selected.
--calcite-pagination-color-border-hoverSpecifies the component's item bottom border color when hovered.
--calcite-pagination-color-border-activeSpecifies the component's item bottom border color when selected.
--calcite-pagination-background-colorSpecifies the component's item background color when active.
--calcite-pagination-icon-color-background-hoverSpecifies the component's chevron item background color when hovered.

Events

NameDescriptionBehavior
calcitePaginationChangeEmits when the selected page changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
goToSet a specified page as active.goTo(page: number | "start" | "end"): Promise<void>
nextPageGo to the next page of results.nextPage(): Promise<void>
previousPageGo to the previous page of results.previousPage(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close