Skip to content
fandhe-frontend
GitHub

Data List

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

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

関連 API: fandhe-frontend-pre-styled-ui API

Demo

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

Name
Alice
Email
alice@example.com
Name
Alice
Email
alice@example.com

Features

  • DataListOrientation（Vertical/Horizontal、crates/pre-styled-ui/src/data_list.rs:70-107）でラベル・値の並びを切り替える
  • item/item-label/item-value の 3 パーツで dl/dt/dd 構造を組み立てる（data_list.rs:93-107, 189-201）
  • orientation の伝搬は root の CSS custom property 経由（通常の CSS 継承、data_list.rs モジュール doc）

Anatomy

root
  item
    item-label
    item-value

API Reference

Arguments

NameTypeDefaultDescription
orientationDataListOrientationVertical並び方向（data_list.rs:70-107、#[default] は Vertical）。

CSS Variables

VariableDefault
--fandhe-data-list-item-displayflex
--fandhe-data-list-item-flex-directioncolumn
--fandhe-data-list-item-gap0.125rem

Examples

Horizontal

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

Name
Alice

Accessibility

WAI-ARIA

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