ValueList

項目の現在の値を、項目名より目立たせて表示します。

公開状態
公開中
公開日時
予約件数
0

今月の受付分です。

担当者
未登録
利用規約とキャンセル条件

前日までのキャンセルは無料です。当日の変更は受付にご相談ください。

予約内容を確認する
管理番号
workspace-autumn-2026-abcdefghijklmnopqrstuvwxyz0123456789
アイコンなし
部屋
中会議室
人数
8名
担当者
未登録
狭い場所で折り返す
共有リンク
https://example.com/articles/autumn-reading-club-2026
人数
8名
右から左に読む場合
الغرفة
قاعة الاجتماعات
التاريخ
١٥ سبتمبر

使いどころ

  • 予約の内容や記事の公開状態のように、一つの対象の属性を「項目名と値」の組で見せる時に使います。
  • 複数の項目を同じ列で見比べる時は Table、値をその場で書き換えさせる時は EditableProperty を使います。
  • 名前ごとに一つの操作が付く設定は SettingList を使います。

使い方

items に label と value を渡します。Highriseの右の列の「Additional info」に合わせ、項目名は灰色の小さな(11px)通常の太さの文字、値は本文と同じ13pxの黒い文字にし、項目の間は罫線を引かずに12px空けます。狭い時は項目名の下に値を置き、幅が22rem以上では項目名と値を横に並べて、値の一行目のベースラインにそろえます。

value が null・undefined の時は淡い「未登録」を出し、0 や空文字はそのまま出して、値の0と未登録を区別します。数値・日時の書式は利用側で決め、日時は time 要素で渡せます。value には段落やリンクなどの要素も渡せ、description は値の下に淡く添えます。

icon にアイコン(塗りつぶしの Icon など)を渡すと、項目名の前に面を付けずに小さく添えます。アイコンの色は accent で選び、green は緑、amber は黄土色、coral は赤茶で、blue と省略した時は項目名と同じ灰色です。

controllerを持たないので、JavaScriptなしでも同じように表示されます。

アクセシビリティ

  • ルートは dl で、項目名は dt、値は dd として読み上げます。
  • icon のアイコンは読み上げから外します。アイコンに項目名以外の意味を持たせないでください。

API

ValueList

ValueListのprops
名前型既定値説明
items必須readonly ValueItem[]並べる項目。一項目を項目名と値の一行にする。

ほかに、<dl>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/value-list.css

ValueItem

ValueItem
名前型既定値説明
label必須string項目名。dtに入れる。
value必須Child現在の値。ddに入れる。nullかundefinedの時は淡い「未登録」を出し、0や空文字はそのまま出す。書式は利用側で決める。
descriptionstring値の下に添える淡い補足。
iconChild項目名の前に置くアイコン。面を付けずに小さく添える。
accentAccentアイコンの色。iconを渡した時だけ効く。greenは緑、amberは黄土色、coralは赤茶で、blueと省略した時は項目名と同じ灰色にする。

Accent

値:"blue" | "green" | "amber" | "coral"

コード

HTML
Hono JSX