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

• Mobile · n/a. A long read's index and page frame on a public site; an app lists its items with List. → List

Pourquoi il est là. The Cahier (ADR-004, krizaka-ui#617): the chapters of the story on blog.krizaka.com's home (ChapterIndex), the head and foot of each chapter's page.

Installation

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

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

import { ChapterIndex, ChapterHead, ChapterFoot } from "@krizaka/ui/chapter";

Exemples

Props

Accessibilité

• ChapterIndex is an ordered list (role="list", kept by VoiceOver without bullets) of links named by their title; the « New » mark is read inside the link, the number and the period around it.
• The whole row is the link's hit area (a stretched pseudo-element); only the title and the mark are its name.
• ChapterHead renders a real h1 (or h2 with level={2}); the meta line's separator and the standfirst's arrow are hidden from assistive technology.
• ChapterFoot is a nav named by label (« Chapters »); its links carry rel="prev" and rel="next", their arrows are decorative.
• In the album the cover is decorative (alt="", the print aria-hidden): the title is the link's name, the whole row its hit area.
• Nothing moves: hover and focus underline the title in the hue, also under reduced motion.

Clavier

Bonnes pratiques

• Short numbers in the margin (01, § 1): the margin is 3 rem wide; the word « Chapter » belongs to the page's heading.
• One line per chapter: the title and its period. Say what was faced and what was built once, on the chapter's page (ChapterHead's standfirst); detail is for an index that truly needs a second line.
• In the album, give every chapter a cover with its real width and height (the print keeps its aspect-ratio, nothing shifts) and one short detail: what was built, in a sentence. The covers after the first two load lazily.
• Inside a Page that already draws the margin, the chapters keep their number column and draw no second red line.
• Mark only the latest chapter isNew, and only while it is new.
• ChapterIndex rules its own lines so every row lands on one: put it in a section without paper, or pass paper={false} when the list starts on the page's module.
• Give ChapterHead the two versusLabels: the arrow of the standfirst is drawn, a screen reader hears the labels.
• Pass the router link as linkAs so internal chapters prefetch.

Composants liés

• PageThe frame of every page: one width (--kz-page-max), one pair of gutters, one vertical rhythm — Page, Section (full-bleed, its heading, a hairline or the brand's backdrop as transition) and SectionHeading, with Facts and Ticks, and the papers (ruled, lines, dot-grid, kraft).
• Page indexA 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.
• Table of contentsThe 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.
• Footnote & captionThe small print of the Cahier: Caption names a figure (fig. 2 — …), FootnoteRef is the number in the text, Footnotes the notes at the foot, each with its way back.
• Taped photoA print taped in the notebook: slightly tilted, a thin white print border, a soft paper shadow and strips of tape. It holds any picture — an image, a video, a live scene.

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