Krizaka UI
Krizaka UI
Composants

Pagination

Moves through a long list page by page: numbers with ellipses that fold into “Page 3 of 12” on a phone, or previous / next on a cursor.

Web + MobileBêtaNavigation

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

Pourquoi il est là. Used by Orochia, Orazaka.

Quand l’utiliser

  • Under a table or a grid of results the person reads page by page: an admin list, search results, invoices.
  • With getHref when the page belongs in the address — a search engine and a shared link reach page 4.
  • In cursor mode (hasPrevious / hasNext) when the API only knows the next page (a cursor, a nextToken).

Quand ne pas l’utiliser

  • For a feed people scroll without a goal: load more at the end of the list instead (an infinite list).
  • To switch between views of the same page: tabs.À la place : Tabs

Installation

Installer

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

Styles

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

Importer

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

Exemples

Search results

Page numbers with ellipses and a status: the explore page of a video platform.

Under an admin table: the rows per page, the range shown, and the pages.

Cursor

An API that only knows the next and previous pages: two buttons and the range.

getHref: every page is a link — crawlable, shareable, the state in the URL.

Props

Moves through a long list: page numbers (folded on a narrow screen) or previous / next on a cursor.

PropTypeDéfautDescription
boundariesnumber1Pages always shown at each end. Default 1.
disabledboolean—Disables every control (a page is loading).
getHref((page: number) => string)—The address of a page: the pages become links (crawlable, shareable, the state in the URL).
hasNextboolean—Cursor mode: whether there is a next page.
hasPreviousboolean—Cursor mode: whether there is a previous page.
labelsPartial<PaginationLabels>—The words, passed translated; English by default.
onNext(() => void)—Cursor mode: called by the next control.
onPageChange((page: number) => void)—Called with the page asked for (buttons). Ignored for the pages getHref turns into links.
onPageSizeChange((size: number) => void)—Called with the size chosen.
onPrevious(() => void)—Cursor mode: called by the previous control.
pagenumber1Pages mode: the current page, from 1.
pageCountnumber—Pages mode: how many pages there are. Without it, the pagination is in cursor mode.
pageSizenumber—The page size, with pageSizeOptions and onPageSizeChange: a select of rows per page.
pageSizeOptionsreadonly number[]—The sizes offered ([10, 20, 50]).
siblingsnumber1Pages shown on each side of the current one. Default 1.
statusReactNode—A text beside the controls, read as is: "41–60 of 1,284", "12 results".

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

TouchesAction
TabReaches the previous control, each page, then the next control.

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.

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

Nav bar

Précédent

Segmented

Suivant

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés