Komponenter
Pagination
Pagination er en liste med knapper som brukes for å navigere mellom ulike sider med innhold, for eksempel søkeresultater eller tabeller.
React
const Preview = () => { return ( <Pagination> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Forrige side' data-variant='tertiary'> Forrige </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 1' data-variant='tertiary'> 1 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 2' data-variant='primary'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item /> <Pagination.Item> <Pagination.Button aria-label='Side 9' data-variant='tertiary'> 9 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 10' data-variant='tertiary'> 10 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Neste side' data-variant='tertiary'> Neste </Pagination.Button> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<Preview />)
- aria-label
- Description
Sets the screen reader label for the Pagination area
- Type
string- Default
Sidenavigering
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Sidenavigering | Sets the screen reader label for the Pagination area |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
PaginationItem
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
PaginationList
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Bruk
Pagination er en komponent uten state, og du må selv styre hvilke sider som er vist.
Bruk usePagination for paginering-logikk sammen med de enkelt del-komponentene.
Les mer om usePagination.
Eksempler
Standard
Eksempelet viser Pagination med knapper som ikke er koblet til noen handling.
Når du trykker vil du ikke navigere til en annen side.
React
const Preview = () => { return ( <Pagination> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Forrige side' data-variant='tertiary'> Forrige </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 1' data-variant='tertiary'> 1 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 2' data-variant='primary'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item /> <Pagination.Item> <Pagination.Button aria-label='Side 9' data-variant='tertiary'> 9 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 10' data-variant='tertiary'> 10 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Neste side' data-variant='tertiary'> Neste </Pagination.Button> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<Preview />)
Med lenker
Under ser du usePagination brukt sammen med Pagination for å lage paginering med lenker.
Du bruker asChild for å endre Pagination.Button til <a>.
React
const WithAnchor = () => { const [currentPage, setCurrentPage] = useState(2); const { pages, nextButtonProps, prevButtonProps } = usePagination({ currentPage, setCurrentPage, totalPages: 10, showPages: 7, }); return ( <Pagination aria-label='Sidenavigering'> <Pagination.List> <Pagination.Item> <Pagination.Button asChild aria-label='Forrige side' {...prevButtonProps} > <a href='#forrige-side'>Forrige</a> </Pagination.Button> </Pagination.Item> {pages.map(({ page, itemKey, buttonProps }) => ( <Pagination.Item key={itemKey}> {typeof page === 'number' && ( <Pagination.Button asChild aria-label={`Side ${page}`} {...buttonProps} > <a href={`#side-${page}`}>{page}</a> </Pagination.Button> )} </Pagination.Item> ))} <Pagination.Item> <Pagination.Button asChild aria-label='Neste side' {...nextButtonProps} > <a href='#neste-side'>Neste</a> </Pagination.Button> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<WithAnchor />)
Mobil
Det er ikke noe innebygget mobilstøtte i Pagination, men du kan vise færre sider og fjerne tekst for forrige/neste knapper på mobile enheter.
React
const Mobile = () => { return ( <Pagination> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Forrige side' data-variant='tertiary' /> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 2' data-variant='tertiary'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 3'>3</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 4' data-variant='tertiary'> 4 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Neste side' data-variant='tertiary' /> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<Mobile />)
HTML
Du bruker klassenavnet ds-pagination på et <nav>-element.
Deretter bruker du en <ul> med <li> som har <button> eller <a> med klassenavn ds-button som barn.
Dersom du legger en tom <li> vil denne vises som en ellipsis (\2026).
Første og siste <li> sitt barn vil få et pil-ikon basert på om det først eller siste <li>.
Merk at du må legge data-variant på <button> eller <a> for å få riktig stil.
Hver knapp burde også ha en beskrivende aria-label for skjermlesere.
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-pagination-gap | var(--ds-size-2) |
| --dsc-pagination-icon-size | var(--ds-size-6) |
| --dsc-pagination-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E") |
Ingen relevante data-attributter funnet.
Rediger denne siden på github.com (åpnes i ny fane)