Komponenter
Pagination
Pagination er en liste med knapper som brukes for å navigere mellom ulike sider med innhold, for eksempel søkeresultater eller tabeller.
React
Unable to parse html
const Preview = () => { return ( <Pagination aria-label='pagineringsmeny'> <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
'Bla i sider'
- data-current
- Description
Current page number
- Type
string
- data-total
- Description
Total number of pages
- Type
string
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior. @deprecated This is not supported anymore, as the element needs to be `ds-pagination`
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Bla i sider' | Sets the screen reader label for the Pagination area |
| data-current | string | - | Current page number |
| data-total | string | - | Total number of pages |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. @deprecated This is not supported anymore, as the element needs to be `ds-pagination` |
PaginationButton
- aria-current
- Description
Toggle button as active Indicates the element that represents the current item within a container or set of related elements.
- Type
boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time"- Default
false
- command
- Description
Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command. "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal"
- Type
string
- commandfor
- Description
Specifies the target element for "command". value is ID of target
- Type
string
- commandFor
- Type
string
- type
- Description
Specify the type of button. Unset when `asChild` is true
- Type
"submit" | "reset" | "button"- Default
'button'
- variant
- Description
Specify which variant to use
- Type
"primary" | "secondary" | "tertiary"- Default
'primary'
- 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-current | boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | false | Toggle button as active Indicates the element that represents the current item within a container or set of related elements. |
| command | string | - | Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command. "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal" |
| commandfor | string | - | Specifies the target element for "command". value is ID of target |
| commandFor | string | - | - |
| type | "submit" | "reset" | "button" | 'button' | Specify the type of button. Unset when `asChild` is true |
| variant | "primary" | "secondary" | "tertiary" | 'primary' | Specify which variant to use |
| 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
Unable to parse html
const Preview = () => { return ( <Pagination aria-label='pagineringsmeny'> <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
Unable to parse html
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
Unable to parse html
const Mobile = () => { return ( <Pagination aria-label='Pagination menu'> <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
Legg klassenavnet ds-pagination på <ds-pagination> elementet.
Web komponenten fyller automatisk knappene med tekst basert på attributtene data-current og data-total.
Dersom du ønsker å lage dine egne knapper kan du legge inn <a> eller <button> elementer inni <ds-pagination>. Dersom du fyller disse med tekst, og ikke sender noen attributter, vil ikke web komponenten endre på knappene.
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") |
| --dsc-pagination-ellipsis | "\2026" |
| --dsc-pagination-label | "Bla i sider" |
| --dsc-button-background--active | var(--ds-color-base-active) |
| --dsc-button-background--hover | var(--ds-color-base-hover) |
| --dsc-button-background | var(--ds-color-base-default) |
| --dsc-button-color | var(--ds-color-base-contrast-default) |
Ingen relevante data-attributter funnet.
Rediger denne siden på github.com (åpnes i ny fane)