Item
リストアイテムを構成するためのコンポーネント群。
インポート
import {
ItemGroup,
Item,
ItemMedia,
ItemContent,
ItemHeader,
ItemTitle,
ItemDescription,
ItemActions,
ItemFooter,
ItemSeparator,
} from '@caroainc/ui-components'個別サブパス（バンドルサイズを抑えたい場合）:
import {
ItemGroup,
Item,
ItemMedia,
ItemContent,
ItemHeader,
ItemTitle,
ItemDescription,
ItemActions,
ItemFooter,
ItemSeparator,
} from '@caroainc/ui-components/item'基本的な使い方
Loading...
<Item>
<ItemMedia>
<Icon name="File" />
</ItemMedia>
<ItemContent>
<ItemTitle>ファイル名.txt</ItemTitle>
<ItemDescription>最終更新: 2024年1月1日</ItemDescription>
</ItemContent>
</Item>バリアント
Loading...
<Item variant="base">Base (デフォルト)</Item>
<Item variant="outline">Outline</Item>
<Item variant="muted">Muted</Item>
<Item variant="ghost">Ghost</Item>サイズ
Loading...
<Item size="sm">Small</Item>
<Item size="default">Default</Item>
<Item size="lg">Large</Item>インタラクティブ
interactiveプロパティを使用すると、クリック可能なスタイルが適用されます。asChild を使っていない場合（生の div を描画する場合）は、tabIndex={0} / role="button" / Enter・Spaceキーでのクリック発火 / フォーカスリングが自動で付与され、キーボードのみでも操作できます（asChild の場合は子要素（Button 等）が自前でキーボード操作を持つため付与されません）。
Loading...
<Item interactive>
<ItemMedia>
<Icon name="Settings" />
</ItemMedia>
<ItemContent>
<ItemTitle>設定</ItemTitle>
<ItemDescription>アプリケーションの設定を変更</ItemDescription>
</ItemContent>
<ItemActions>
<Icon name="ChevronRight" />
</ItemActions>
</Item>メディアバリアント
デフォルトアイコン
Loading...
背景付きアイコン
Loading...
画像
Loading...
アバター
Loading...
<ItemMedia variant="default">アイコン</ItemMedia>
<ItemMedia variant="icon">背景付きアイコン</ItemMedia>
<ItemMedia variant="image">画像</ItemMedia>
<ItemMedia variant="avatar">円形アバター</ItemMedia>アクション付き
Loading...
<Item>
<ItemMedia variant="icon">
<Icon name="FileText" />
</ItemMedia>
<ItemContent>
<ItemTitle>ドキュメント.pdf</ItemTitle>
<ItemDescription>2.4 MB</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="ghost" size="sm">
<Icon name="Download" size="sm" />
</Button>
<Button variant="ghost" size="sm">
<Icon name="Trash2" size="sm" />
</Button>
</ItemActions>
</Item>グループ化
Loading...
<ItemGroup>
<Item interactive>
<ItemMedia>
<Icon name="Inbox" />
</ItemMedia>
<ItemContent>
<ItemTitle>受信トレイ</ItemTitle>
</ItemContent>
<ItemActions>
<Badge variant="primary">12</Badge>
</ItemActions>
</Item>
<ItemSeparator />
<Item interactive>...</Item>
</ItemGroup>実際の使用例
連絡先リスト
Loading...
ファイル一覧
Loading...
設定メニュー
Loading...
Props
Item
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'base' | 'outline' | 'muted' | 'ghost' | 'base' | アイテムのスタイルバリアント |
size | 'sm' | 'default' | 'lg' | 'default' | アイテムのサイズ |
interactive | boolean | false | ホバー時のスタイルを適用。asChildがfalseのときはtabIndex/role="button"/Enter・Spaceキー操作/フォーカスリングも自動付与 |
asChild | boolean | false | 子要素をコンポーネントとして使用 |
ItemMedia
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'icon' | 'image' | 'avatar' | 'default' | メディアのスタイルバリアント |
ItemGroup, ItemContent, ItemHeader, ItemTitle, ItemDescription, ItemActions, ItemFooter
これらのコンポーネントは標準のHTML属性を受け付けます。
ItemSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | セパレーターの方向 |
decorative | boolean | true | 装飾目的かどうか |