Description list

Facts about one thing as term and value: stacked, inline like a receipt, or a grid of key figures (KeyValueGrid).

Web + MobileBêtaAffichage de données

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à. Facts of an object: Orazaka's job details and Orochia's order pages.

Quand l’utiliser

Installer

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

Styles

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

Importer

import { DescriptionList, KeyValueGrid } from "@krizaka/ui/description-list";

A job's status, studio, start and credits.

layout="inline": where a tip goes.

KeyValueGrid: an account's limits as cards that wrap.

DescriptionList

Term and value pairs — a job's details, a payout's breakdown — stacked, inline like a receipt, or as cards.

Prop	Type	Défaut	Description
`items`requis	`readonly DescriptionItem[]`	—	The pairs, in reading order.
`layout`	`"grid" \| "inline" \| "stacked"`	—	stacked (default: a details panel) · inline (term left, value right: a receipt, a summary) · grid (cards).

KeyValueGrid

Key figures as a grid of cards that wraps with the width: a job's numbers, an account's limits.

Prop	Type	Défaut	Description
`items`requis	`readonly DescriptionItem[]`	—	The pairs, in reading order.
`minWidth`	`number`	`10`	The narrowest a card may be before the grid wraps, in rem. Default 10.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub