KOMPONENTER

Pagination

npmv4.2.29

Pagination brukes for å fordele innhold på over flere sider, for å unngå for mange elementer i én og samme visning.

npm install @entur/menu

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

Komponenter

Pagination

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

Navn	Type	Default-verdi	Beskrivelse
`className?`	`string`		Ekstra klassenavn
`currentPage`	`number`		Sidenummeret som er aktivt nå (1-indeksert)
`onPageChange`	`(requestedPage: number) => void`		Callback for når man ønsker å gå til en ny side
`pageCount`	`number`		Antall sider totalt
`previousPageLabel?`	`string`	`"Gå til forrige side"`	Hva som blir lest opp når brukere av skjermlesere navigerer til “forrige side knappen”
`nextPageLabel?`	`string`	`"Gå til neste side"`	Hva som blir lest opp når brukere av skjermlesere navigerer til “neste side knappen”
`pageLabel?`	`((pageNumber: number) => string)`	pageNumber => `Gå til side ${pageNumber}`,	Hva som blir lest opp når brukere av skjermlesere navigerer til “forrige side knappen”
`currentPageLabelForScreenreader?`	`string`	`"Nåværende side:"`
`showInput?`	`boolean`	`false`	Vis et felt til høyre for pagineringen hvor man kan angi siden man ønsker å vise i et tekstfelt.
`inputLabel?`	`string`	`"Gå til side"`	Label som vises til venstre for input-feltet som vises om `showInput` er true
`numberOfResults?`	`number`		Hvor mange resultater man har totalt
`resultsPerPage?`	`number`		Hvor mange resultater som vises per side
`resultsPerPageOptions?`	`number[]`	`[10,25,50]`
`onResultsPerPageChange?`	`((e: number) => void)`		Callback for når resultater per side oppdateres
`hideNextButton?`	`boolean`	`false`	Brukes for å skjule “neste side”-knappen
`hidePrevButton?`	`boolean`	`false`	Brukes for å skjule “forrige side”-knappen
`showingResultsLabel?`	`((minPage: number, maxPage: number, pageCount: number) => string)`	`Viser resultat ${minPage} - ${maxPage} av ${pageCount}`	Teksten som vises for hvilke resultater av sideantallet man viser.
`showNumberOfResultsLabel?`	`string`	`"Vis"`	Teksten som vises før “resultsPerPage”-velgeren

<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 for bruk

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.

Pagination

Komponenter

Props

Retningslinjer for bruk

Eksempel