Aksel

Meny

Komponenter / Core

Pagination

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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:

Har du innspill til komponenten?

Send forslag

Eksempler

Komponenten finnes i størrelsene medium, small og xsmall.

SandboxSandbox
Åpne eksempel i nytt vindu

Props

Pagination

page

  • Type:
    number
  • Description:

siblingCount?

  • Type:
    number
  • Default:
    1
  • Description:

boundaryCount?

  • Type:
    number
  • Default:
    1
  • Description:

onPageChange?

  • Type:
    ((page: number) => void)
  • Description:

count

  • Type:
    number
  • Description:

size?

  • Type:
    "medium" | "small" | "xsmall"
  • Default:
    "medium"
  • Description:

prevNextTexts?

  • Type:
    boolean
  • Default:
    false
  • Description:

renderItem?

  • Type:
    ((item: RenderItemProps) => ReactNode)
  • Default:
    PaginationItem
  • Description:

srHeading?

  • Type:
    { tag: "h2" | "h3" | "h4" | "h5" | "h6"; text: string; }
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLElement>
  • Description:

Tokens

TokenFallback
--ac-pagination-text--a-text-default
--ac-pagination-selected-bg--a-surface-action-selected
--ac-pagination-selected-text--a-text-on-action
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.