メタデータリストMetadataListBeta

インスペクターや詳細パネルで使う、ラベルと値のメタ情報リストです。

プレビュー

サイズ
1920 x 1080
形式
JPG
容量
1.4MB
作成日
2026-05-12

状態とバリエーション

コンパクト

狭いインスペクターやサイドパネルでは compact で行の密度を上げます。

形式
JPG
容量
1.4MB

横並び

概要カードや詳細ヘッダーでは layout="horizontal" で複数のメタ情報を横に並べます。

サイズ
1920 x 1080
形式
JPG
容量
1.4MB
作成日
2026-05-12

空

メタ情報がまだない場合は、空欄にせず短いメッセージを表示します。

メタ情報はありません

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
itemsMetadataListItem[]-ラベルと値の行として表示する項目です。
variant"default" | "compact""default"行の密度を切り替えます。
layout"vertical" | "horizontal""vertical"縦並びか横並びかを切り替えます。
emptyMessageReactNode-空の場合の表示内容です。日本語 UI では明示的に日本語の文言を渡してください。
wrapbooleanfalse値を省略（truncate）せず折り返します。長い値（製造ライン名など）向け。項目ごとに MetadataListItem.wrap で上書き可。(#284)
classNamestring-外側に追加するクラスです。

使い方

import { MetadataList } from "@gunjo/ui";
import { IconCalendarEvent as CalendarDays, IconDatabase as HardDrive, IconFileTypeJpg as FileImage, IconRuler as Ruler } from "@tabler/icons-react";

const items = [
  { label: "サイズ", value: "1920 x 1080", icon: <Ruler className="h-3.5 w-3.5" /> },
  { label: "形式", value: "JPG", icon: <FileImage className="h-3.5 w-3.5" /> },
  { label: "容量", value: "1.4MB", icon: <HardDrive className="h-3.5 w-3.5" /> },
  { label: "作成日", value: "2026-05-12", icon: <CalendarDays className="h-3.5 w-3.5" /> },
];

export function Example() {
  return <MetadataList items={items} />;
}

設計の判断

  • ul ではなく dl にした。資料は順序と操作の有無でリストの種類を選べと書いています。ここは「名前と値の組」なので、dl と dt と dd を使います。項目に順序の意味は無く、押すこともありません。
  • 既定は切り詰めで、伸ばすのは宣言で。値は既定で1行に切り詰め、title 属性に全文を入れます。折り返したいときは wrap を渡し、項目ごとの上書きもできます（#284）。行の高さが揃うことを既定にしたのは、詳細パネルに縦に並べたときに読み飛ばしやすくするためです。
  • 空のときは何も描かずに済ませない。項目が0件のときは破線の枠に emptyMessage を出します。資料も「空状態を必ず設計する」を挙げています。何も描かないと、読み込み中なのか本当に無いのかが分かりません。
    一般のリストの設計は UIXHERO の「リスト」にあります。 UIXHERO: リスト（List）

使用コンポーネント

MetadataList

関連コンポーネント

TableAssetInspectorPanelCard