Komponenter
Pagination
Pagination lar deg bla mellom flere sider og vise hvilken side du er på.
Egnet til:
- Søkeresultater som er delt inn i flere sider
- Store mengder data som er delt inn i flere sider, for eksempel tabeller.
Uegnet til:
Eksempler
Retningslinjer
Legg merke til at denne komponenten ikke er responsiv, så du må gjøre egne tilpasninger for mobil. En mulighet er å bytte til en annen komponent på mobil, for eksempel Select.
Props
Pagination
page
- Type:
number - Description:
Current page.
Pagination indexing starts at 1.
siblingCount?
- Type:
number - Default:
1 - Description:
Number of always visible pages before and after the current page.
boundaryCount?
- Type:
number - Default:
1 - Description:
Number of always visible pages at the beginning and end.
onPageChange?
- Type:
((page: number) => void) - Description:
Callback when current page changes.
count
- Type:
number - Description:
Total number of pages.
size?
- Type:
"medium" | "small" | "xsmall" - Default:
""medium"" - Description:
Changes padding, height and font-size.
prevNextTexts?
- Type:
boolean - Default:
false - Description:
Display text alongside "previous" and "next" icons.
renderItem?
- Type:
((item: RenderItemProps) => ReactNode) - Default:
PaginationItem - Description:
Override pagination item rendering.
srHeading?
- Type:
{ tag: "h2" | "h3" | "h4" | "h5" | "h6"; text: string; } - Description:
Pagination heading. We recommend adding heading instead of
aria-labelto help assistive technologies with an extra navigation-stop.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| Token | Fallback |
|---|---|
| --ac-pagination-text | --a-text-default |
| --ac-pagination-selected-bg | --a-surface-action-selected |
| --ac-pagination-selected-text | --a-text-on-action |