インスペクターInspectorPanelExperimental
選択中の対象に紐づくプロパティを、セクションとフィールドで閲覧・編集するパネルです。
プレビュー
状態とバリエーション
標準表示
ヘッダー、本文、フッター操作を持つプロパティ編集パネルです。
長方形 1
レイアウト
外観
表示
コンパクト
小さなサイドパネルで少数の設定を扱います。
テキストレイヤー
タイポグラフィ
カスタムヘッダー
ヘッダー内に補助操作を置きたい場合は header を差し替えます。
画像設定
アセット
フッターなし
読み取り専用の補助情報では、フッター操作を省略できます。
読み取り専用メタデータ
詳細
- 形式
- PNG
- サイズ
- 2.4 MB
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | string | - | 標準ヘッダーに表示するタイトルです。 |
| header | React.ReactNode | - | title の代わりに描画するカスタムヘッダーです。 |
| footer | React.ReactNode | - | 下部に固定表示する操作領域です。 |
| children | React.ReactNode | - | セクションやフィールドを含む本文です。 |
| className | string | - | サイズや枠線などを調整する追加 className です。 |
使い方
import {
Button,
HStack,
Input,
InspectorField,
InspectorPanel,
InspectorSection,
Switch,
} from "@gunjo/ui";
export function ShapeInspector() {
return (
<InspectorPanel
title="長方形 1"
className="h-[420px] w-[320px] rounded-lg border shadow-sm"
footer={
<HStack justify="between" className="w-full">
<Button variant="ghost" size="sm">リセット</Button>
<Button size="sm">適用</Button>
</HStack>
}
>
<InspectorSection title="レイアウト">
<div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-2">
<InspectorField label="X"><Input defaultValue="24" className="h-8 w-full min-w-0" /></InspectorField>
<InspectorField label="Y"><Input defaultValue="48" className="h-8 w-full min-w-0" /></InspectorField>
<InspectorField label="W"><Input defaultValue="240" className="h-8 w-full min-w-0" /></InspectorField>
<InspectorField label="H"><Input defaultValue="160" className="h-8 w-full min-w-0" /></InspectorField>
</div>
</InspectorSection>
<InspectorSection title="外観">
<InspectorField label="塗り"><Input defaultValue="Primary" className="h-8 w-full min-w-0" /></InspectorField>
<HStack justify="between">
<span className="text-xs text-foreground">表示</span>
<Switch defaultChecked />
</HStack>
</InspectorSection>
</InspectorPanel>
);
}設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。