Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Pagination

Oppdatert 4. august 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    Med paginering kan man dele opp sider i seksjoner slik at brukerne ikke blir overveldet av for mye innhold eller data samtidig.

    Egnet til:

    • Navigasjon mellom relaterte sider/seksjoner
    • Dele søkeresultater inn i flere sider
    • Dele store mengder relatert innhold inn i flere sider, eksempelvis i tabeller.

    Uegnet til:

    • Å vise fremdrift

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Varianter

    Størrelse

    Komponenten finnes i størrelsene medium, small og xsmall. Hvilken størrelse som passer best bestemmes individuelt.

    Medium, small og xsmall pagination

    Forrige og neste

    Knappene som blar til forrige og neste kommer standard med kun chevron.

    Forrige og neste med kun chevron

    Label og chevron

    Ved å skru på prop'en `prevNextTexts` kan forrige- og neste-knappen brukes med label og chevron.

    Forrige og neste med label og chevron

    Tilgjengelighet

    Tastaturinteraksjon

    Komponenten følger vanlig tabindex og implementerer standard interaksjon som `<button>` elementer.

    KommandoInteraksjon
    TabFokus settes på neste element i tab rekkefølgen
    Shift+TabFokus settes på forrige element i tab rekkefølgen
    SpaceVelger side/knapp i komponenten
    EnterVelger side/knapp i komponenten

    Props

    Pagination

    page number
    Current page @note Pagination indexing starts at 1
    siblingCount?number
    Number of always visible pages before and after the current page.
    boundaryCount?number
    Number of always visible pages at the beginning and end.
    onPageChange? ((page: number) => void)
    Callback when current page changes
    count number
    Total number of pages
    size?"medium" | "small" | "xsmall"
    Changes padding, height and font-size
    prevNextTexts?boolean
    Display text alongside "previous" and "next" icons
    renderItem?((item: PaginationItemProps) => ReactElement<any, any> | null)
    Override pagination item rendering
    className? string
    ref? Ref<HTMLElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Pagination extends HTMLElement

    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.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack