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 | Promise<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
ref?
- Type:Ref<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