Table of contents
The sections of a reading page: sticky beside the content on a wide screen, a row of chips that scrolls sideways on a phone, the section being read marked — with TocLayout to place it.
Web uniquement — React, depuis @krizaka/ui/toc. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A long page read in sections: a building block's page, a guide, a policy.
- When readers jump to one part (install, decisions, status) more than they read from the top.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Toc, TocLayout } from "@krizaka/ui/toc";Exemples
A reading page
Three sections, the contents in a sticky column beside them.
Install
The install of the building block.
Decisions
The decisions of the building block.
Status
The status of the building block.
Props
Toc
The sections of the page, the one being read marked.
| Prop | Type | Défaut | Description |
|---|---|---|---|
itemsrequis | readonly { id: string; label: ReactNode; }[] | — | The sections, in order: the id of each section's title and its words. |
labelrequis | string | — | The navigation's name and visible label: On this page. |
TocLayout
A reading page: the table of contents in a sticky column on the left, the sections beside it (one column on a phone).
| Prop | Type | Défaut | Description |
|---|---|---|---|
tocrequis | ReactNode | — | The table of contents (a Toc). |
Accessibilité
- A
navnamed by its label, with an ordered list of links. - The section being read carries
aria-current="location", found by one IntersectionObserver.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves through the sections' links; Enter jumps to the section. |
Bonnes pratiques
- Three to eight entries, the words of the section titles.
- Every entry points at a heading's
id(aSection's): its anchor. - Set
--kz-anchor-offsetonce to clear a fixed navigation bar.
Composants liés
Générée depuis le code de @krizaka/ui 2.8.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub