Page index

A book's index for a documentation or a catalogue: groups, entries, a dotted leader and the page number at the end of the line; the current entry marked in the margin.

Web · ✓Mobile · n/aBureau · ✓BêtaNavigation

import { PageIndex } from "@krizaka/ui/page-index";

Web uniquement — React, depuis @krizaka/ui/page-index. Bêta : son API peut encore changer à une version mineure.

Mobile · n/a. A documentation sidebar; an app's navigation is its tab bar and lists. → List

Pourquoi il est là. The Cahier (ADR-004): the index of ui.krizaka.com's components, numbered like a reference book.

Quand l’utiliser

The sidebar of a documentation: the components of a group, numbered as the pages of a reference book.
The table of a catalogue or a long read, where a number helps the reader find a page again.

Quand ne pas l’utiliser

The sections of the page being read.À la place : Table of contents
The navigation of an application.À la place : Rail nav

Installation

Installer

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

Styles

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

Importer

import { PageIndex } from "@krizaka/ui/page-index";

Exemples

A documentation's index

Two groups, the current entry marked, the page numbers aligned.

Props

A book's index: headings, entries, a dotted leader and the page number; the current entry marked in the margin.

Prop	Type	Défaut	Description
`groups`requis	`readonly IndexGroup[]`	—	The groups, in reading order.
`label`	`string`	`Index`	The accessible name of the navigation.
`linkAs`	`LinkComponent`	—	The app's router link (Next's `Link`), so internal entries prefetch.

Accessibilité

A nav named by label (« Index »); each group a heading and a list of links.
The current entry carries aria-current="page"; the margin's arrow and the dotted leader are decorative.

Bonnes pratiques

Numbers are the reader's landmarks: keep them stable (a component keeps its number across versions).
Group titles are short and typed in lower case; three to eight entries per group.
Pass the router link as linkAs so internal entries prefetch.

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