Pagination

npm install @entur/menu

@import '@entur/menu/dist/styles.css';

Varianter

Pagination

<Pagination />-komponenten er ganske grei å bruke. Du sier hvor mange sider du har totalt, hvilken side man er på nå, og hva som skal skje når man trykker på et tall.

Hver gang brukeren ber om å endre en side, så blir callbacken onPageChange kalt med nummeret til den ønskede siden. Det er da opp til utvikleren å implementere navigasjonen derifra - f.eks. med window.history.push(), eller APIene til react-router, om du bruker det.

Du kan også spesifisere showInput for å vise et input-felt, der man kan skrive inn hvilken side man ønsker å bruke. Det kan være praktisk i svært store datasett, men bør kun brukes der det er behov.

Om du ønsker flerspråklig støtte, har du tilgang på flere props: pageLabel, previousPageLabel, nextPageLabel, og eventuelt inputLabel om det trengs.

For visning av resultat per side, og muligheten for å endre dette, bruk resultsPerPage og onResultsPerPageChange. Bruk så enten 10, 25 eller 50 resultater per side.

Retningslinjer

Pagination brukes for å fordele innhold på over flere sider, for å unngå for mange elementer i én og samme visning. Komponenten brukes for eksempel i Tabeller der man presenterer et sett antall rader, med mulighet til å navigere seg til et annet sett.

Pagineringskontroller er tilgjengelig for å gi rask tilgang til alle sider og indikerer at flere sider eksisterer.

Kontrollene som støttes er:

• Rader per side: Viser antall resultater slik at brukeren kan tilpasse hvor mye de ønsker å se.
• Venstre og høyre pil: Lar brukeren navigere til neste eller forrige side.
• Gå til side: Lar brukeren hoppe direkte til en ønsket side.

Props

import { Pagination } from '@entur/menu';

Denne komponenten har ingen props