Patterns
Glossary
A page or panel listing terms and definitions from the host's catalogue.
import { Glossary } from "@krizaka/ui/glossary";Les mots du commerce
- Ventes TTC
- Les ventes, toutes taxes comprises.
- Marge brute
- Les ventes moins le coût des produits vendus.
Web only — React, from @krizaka/ui/glossary. Beta: its API may still change in a minor version.
- Mobile · n/a. The native twin is a follow-up; present the same catalogue in a native list for now. → Description list
Why it is here. Akinaza's owner dashboard: a short reference for commerce terms alongside its explained figures.
When to use
- A page needs a reference list for the terms used in its figures.
- A host catalogue should be readable without opening each inline definition.
When not to use
- A term needs a short inline explanation.Use instead: Glossary term
- A record needs a general list of labels and values.Use instead: Description list
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Glossary } from "@krizaka/ui/glossary";Examples
A shop's terms
A small glossary that uses the same definitions as the inline terms.
Les mots du commerce
- Ventes TTC
- Les ventes, toutes taxes comprises.
- Marge brute
- Les ventes moins le coût des produits vendus.
Props
A page or panel listing the terms and definitions from the host's glossary catalogue.
| Prop | Type | Default | Description |
|---|---|---|---|
termsrequired | readonly GlossaryEntry[] | — | The terms and definitions from the host's catalogue, in the desired reading order. |
titlerequired | ReactNode | — | The section's visible heading. |
Accessibility
- The heading labels the section; terms and definitions use a semantic description list.
- The block does not sort, translate or invent catalogue entries.
Best practices
- Pass terms and definitions from the host's catalogue, in the reading order the host chooses.
- Give each entry a stable id.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub