Caroa UI

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

PropTypeDefaultDescription
variant'base' | 'outline' | 'muted' | 'ghost''base'アイテムのスタイルバリアント
size'sm' | 'default' | 'lg''default'アイテムのサイズ
interactivebooleanfalseホバー時のスタイルを適用。asChildがfalseのときはtabIndex/role="button"/Enter・Spaceキー操作/フォーカスリングも自動付与
asChildbooleanfalse子要素をコンポーネントとして使用

ItemMedia

PropTypeDefaultDescription
variant'default' | 'icon' | 'image' | 'avatar''default'メディアのスタイルバリアント

ItemGroup, ItemContent, ItemHeader, ItemTitle, ItemDescription, ItemActions, ItemFooter

これらのコンポーネントは標準のHTML属性を受け付けます。

ItemSeparator

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'セパレーターの方向
decorativebooleantrue装飾目的かどうか

Previous

InputOTP

Next

Label

On this page