Patrons
Glossary term
An underlined host-defined term with a keyboard-accessible definition tooltip.
import { GlossaryTerm } from "@krizaka/ui/glossary-term";La marge brute aide à comparer les mois.
Web uniquement — React, depuis @krizaka/ui/glossary-term. Bêta : son API peut encore changer à une version mineure.
- Mobile · n/a. The inline web tooltip has no native twin yet; a native screen can present the same definition in text. → Description list
Pourquoi il est là. Akinaza's inline explanations of accounting and booking terms, without sending a shop owner away.
Quand l’utiliser
- A reader may need a short explanation of a domain word without leaving the sentence.
- A data figure uses a term that is defined in the host's catalogue.
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 { GlossaryTerm } from "@krizaka/ui/glossary-term";Exemples
Inline definition
Explain one shop figure in a sentence without replacing the host's wording.
La marge brute aide à comparer les mois.
Props
An underlined glossary word with a keyboard- and screen-reader-accessible definition tooltip.
| Prop | Type | Défaut | Description |
|---|---|---|---|
definitionrequis | ReactNode | — | The host's definition. |
termrequis | string | — | The word in the host's glossary. |
Accessibilité
- The term remains the trigger's accessible name and the definition is linked as its description.
- The tooltip opens on keyboard focus and pointer hover.
Clavier
| Touches | Action |
|---|---|
| Tab | Focuses the term and opens its definition; Escape dismisses the tooltip. |
Bonnes pratiques
- Keep the definition short enough to read in context.
- Use the same term and definition in the page glossary and the host's catalogue.
Composants liés
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