Pagination

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { Pagination, pageRange } from "@krizaka/ui/pagination";

Exemples

Props

Accessibilité

• A nav named by labels.nav; the current page carries aria-current="page".
• Each number is named “Page 4” (labels.page); the ellipses are hidden from assistive technology.
• A disabled link is aria-disabled with no href: it is skipped by the Tab key and read as unavailable.

Clavier

Bonnes pratiques

• Say where the list stands with status (“61–80 of 392 videos”): it is read next to the controls.
• Prefer links (getHref) for public lists; buttons (onPageChange) for a list inside an app screen.
• Keep siblings at 1 on a list people browse; the container folds the numbers by itself under 28rem.
• Disable the controls (disabled) while the next page loads, and move the focus to the top of the list after.

Composants liés

• Data tableA table of records — sort, selection, loading, empty and error states — that turns into cards on a phone and renders only the rows in view when there are thousands.
• Filter barThe bar above a list: the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.
• Search fieldA search box: a clear button, a global ⌘K / Ctrl+K shortcut, a debounced onSearch, Enter to submit, and suggestions with the keyboard.

Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub