Data List

fandhe-frontend-pre-styled-ui の data_list mod が提供するスタイル済み Data List 部品です。

ラベルと値の対を一覧表示する部品です。DataListOrientation（Vertical/Horizontal）でラベル・値の並びを切り替えられます。統計指標の強調表示には Stat を検討してください。

size（xs〜xl、既定 md。chakra-ui の sm/md/lg・Radix Themes の 1〜3 に対応）で gap・文字サイズが連動して変化し、variant（subtle/bold、既定 subtle）でラベル・値の強調配色を切り替えられます（chakra-ui の subtle/bold に対応）。Horizontal 時のラベル列幅は 120px に固定され、値セルはバッジ・リンク・アイコン等を横並びで配置できます。

Demo

dl/dt/dd の定義リスト意味論を尊重したラベル・値の一覧表示。orientation（vertical / horizontal）・variant（subtle / bold）・size（xs〜xl）の 3 軸 variant を持ちます。

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Name: Alice
Email: alice@example.com

Features

DataListOrientation（Vertical/Horizontal、crates/pre-styled-ui/src/data_list.rs:106-113）でラベル・値の並びを切り替える
DataListVariant（Subtle/Bold、data_list.rs:129-136、イシュー #1559）でラベル・値の強調配色を切り替える
size（Size::Xs〜Xl、既定 Md、data_list.rs recipe() の size_variants）で gap・font-size を段階的に切り替える
item/item-label/item-value の 3 パーツで dl/dt/dd 構造を組み立てる
orientation/variant/size の伝搬は root の CSS custom property 経由（通常の CSS 継承、data_list.rs モジュール doc）

Anatomy

root
  item
    item-label
    item-value

API Reference

Arguments

Name	Type	Default	Description
`orientation`	`DataListOrientation`	`Vertical`	並び方向（#[default] は Vertical）。
`variant`	`DataListVariant`	`Subtle`	見た目 variant（イシュー #1559。#[default] は Subtle。ラベル muted・値 fg / Bold はラベル fg+medium 太字・値 muted）。
`size`	`Size`	`Md`	サイズ variant（イシュー #1559。Xs〜Xl の 5 段、既定 Md）。

CSS Variables

Variable	Default
`--fandhe-data-list-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-data-list-gap`	`var(--fandhe-space-4)`
`--fandhe-data-list-item-display`	`flex`
`--fandhe-data-list-item-flex-direction`	`column`
`--fandhe-data-list-item-gap`	`var(--fandhe-space-1)`
`--fandhe-data-list-label-color`	`var(--fandhe-color-fg-muted)`
`--fandhe-data-list-label-font-weight`	`var(--fandhe-font-font-weight-normal)`
`--fandhe-data-list-label-min-width`	`auto`
`--fandhe-data-list-value-color`	`var(--fandhe-color-fg)`

Examples

Horizontal

ラベル・値を横並び表示する Horizontal variant の例です。

Name: Alice

Bold

ラベルを強調表示する Bold variant の例です。

Name: Alice

Accessibility

WAI-ARIA

Attribute	Description
(該当なし)	dl/dt/dd のネイティブ意味論のみで固有の role/aria-* は出力しない（data_list.rs 全文で role/aria-* を grep しても 0 件）。