Pagination

Paginering fordeler innhold på flere sider, enten det gjelder datatabell eller grupper av innhold.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Paginering

Styr pagineringen med egen state. Du kan bruke `useBreakpointValue` til å ha færre siblings på mindre skjermer.

function PaginationExample() {
  const [currentPage, setCurrentPage] = React.useState(1);

  const handlePageChange = (newPage) => {
    setCurrentPage(newPage);
  };

  const siblingCount = useBreakpointValue({
    base: 0,
    medium: 1
  })

  return (
    <Pagination
      currentPage={currentPage}
      nextLabel="neste"
      onPageChange={handlePageChange}
      pageLabel="side"
      prevLabel="forrige"
      totalPages={15}
      siblingCount={siblingCount}
    />
  );
}

Retningslinjer

Pagination er wrappet i en nav. Gi passende aria-label på nav om det er flere nav-er på samme side, e.g. "tabell-paginering".

Sett riktig ord for forrige, neste og side for skjermleseren.

Kode

<Pagination />

import { Pagination } from "@aneo-org/design-react/serverComponents";

Pagineringskomponenten.