Catalogue page
A catalogue or an index: the search in the hero, the filters in a sticky column beside the results (folded above them on a phone), the count, the results.
Web uniquement — React, depuis @krizaka/ui/catalogue-page. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Components, packs, use cases, repositories.
- Any index the reader narrows down.
Quand ne pas l’utiliser
- For media to look at.À la place : Gallery page
- For rows to sort and select.À la place : Data table
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { CataloguePage } from "@krizaka/ui/catalogue-page";Exemples
Components
Krizaka UI's components: search, platform filters, compact link cards.
Krizaka UI
Components
Every component, web and mobile, documented from its code.
Props
A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results.
| Prop | Type | Défaut | Description |
|---|---|---|---|
filtersrequis | ReactNode | — | The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. |
filtersLabelrequis | string | — | On a phone, the words that open the filters (Filters). |
titlerequis | ReactNode | — | The page's h1. |
back | { href: string; label: string; } | — | The way back. |
count | ReactNode | — | What matches, in words (24 components). |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One sentence under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
search | ReactNode | — | In the hero: a search field. |
toolbar | ReactNode | — | On the right of the count: the sort, a view switch. |
Accessibilité
- The count is a polite live region; the filters a native disclosure on a phone.
- Results are a list of links.
Bonnes pratiques
- Filters as links: the address keeps them, back works.
- Say the count in words, politely announced.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Split view
A list and its open item: two panes on a desktop; on a phone one at a time, the open item with the way back — chosen by showDetail, from the address.
Changelog page
What changed and why: each entry with its date and version sticking beside it, its changes by kind in words and colour, its reasons under it.