メタデータリストMetadataListExperimental
インスペクターや詳細パネルで使う、ラベルと値のメタ情報リストです。
プレビュー
- サイズ
- 1920 x 1080
- 形式
- JPG
- 容量
- 1.4MB
- 作成日
- 2026-05-12
状態とバリエーション
コンパクト
狭いインスペクターやサイドパネルでは compact で行の密度を上げます。
- 形式
- JPG
- 容量
- 1.4MB
横並び
概要カードや詳細ヘッダーでは layout="horizontal" で複数のメタ情報を横に並べます。
- サイズ
- 1920 x 1080
- 形式
- JPG
- 容量
- 1.4MB
- 作成日
- 2026-05-12
空
メタ情報がまだない場合は、空欄にせず短いメッセージを表示します。
メタ情報はありません
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | MetadataListItem[] | - | ラベルと値の行として表示する項目です。 |
| variant | "default" | "compact" | "default" | 行の密度を切り替えます。 |
| layout | "vertical" | "horizontal" | "vertical" | 縦並びか横並びかを切り替えます。 |
| emptyMessage | ReactNode | - | 空の場合の表示内容です。日本語 UI では明示的に日本語の文言を渡してください。 |
| className | string | - | 外側に追加するクラスです。 |
使い方
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} />;
}