Composants
Meta row
One quiet line of facts about a thing, separated by dots, with optional status chips at its end: the line under a title.
import { MetaRow } from "@krizaka/ui/meta-row";Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. Built for a product now paused (2026-10-25): kept until the next major's audit decides: the quiet line under a video's title — quality, shape, duration, date, and an AI badge.
Quand l’utiliser
- Under a video's, an article's or a listing's title: quality, shape, duration, date.
- When the facts are a few short values that read in one glance, with at most a status chip or two (“Encoding”, “AI-generated”).
Quand ne pas l’utiliser
- For facts that need a term beside their value, or more than a handful.À la place : Description list
- For a status alone.À la place : Badge
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { MetaRow } from "@krizaka/ui/meta-row";Exemples
Under a video
Quality, shape, duration, frame rate and date, with an AI badge at the end.
With a status
A chip after the facts while the video is still encoding.
Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
itemsrequis | readonly ReactNode[] | — | The facts, in reading order, already translated ("HD 720p", "9:16", "0:05"). Empty ones (null, false, "") are skipped. |
chips | readonly ReactNode[] | [] | Status chips after the facts (a Badge, a ChipLink): not dot-separated, e.g. "Encoding" or "AI-generated". |
size | "sm" | "md" | — | sm (default) · md. |
Accessibilité
- A real list (
ul/li): the dots arearia-hidden, a screen reader hears “list, 5 items”. Give itaria-labelwhen its subject is not obvious. - On a phone: a native
listwith the same items; the dots are decorative and hidden from the screen reader.
Clavier
| Touches | Action |
|---|---|
| Tab | The row is not a stop; only an interactive chip inside it is. |
Bonnes pratiques
- Pass every fact translated and already formatted; skip a fact you do not know rather than showing a dash (empty values are dropped for you).
- Keep it to five facts and one line on a phone; the line wraps, never scrolls.
- Put only the exceptional on the chips (“Encoding” when it is not ready): a state that is always true is noise.
- Detail beyond the line goes in a disclosure under it, not in more facts.
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