Pagination
a control that enables selection of a single page from a range of pages
Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
"a user friendly label for screen readers"
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
"start"
"center"
"end"
"stretch"
The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
"xsmall"
"small"
"medium"
"large"
"xlarge"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
Function called when the user clicks a page or arrow button. The
single argument is an event containing the target page via
event.page
, and the startIndex and endIndex for items contained
in the target page via event.startIndex
and event.endIndex
,
respectively.
({ page, startIndex, endIndex }) => {...}
The default page. If used with onChange, it can be used to control the active page via state.
Any additional style for the Box wrapping the pagination controls.
"any CSS"
(props) => {}
How the pagination controls should be aligned within the containing Box.
"center"
Direction in which the containing Box should display the pagination controls.
"row"