Caroa UI

DropdownMenu

ドロップダウンメニューコンポーネント。

インポート

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@caroainc/ui-components/client'

基本的な使い方

Loading...
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">メニュー</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>アカウント</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>プロフィール</DropdownMenuItem>
    <DropdownMenuItem>設定</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>ログアウト</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

アイコン付き

Loading...
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">
      <Icon name="Settings" size="sm" />
      オプション
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      <Icon name="User" size="sm" className="mr-2" />
      プロフィール
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Icon name="CreditCard" size="sm" className="mr-2" />
      請求
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Icon name="Settings" size="sm" className="mr-2" />
      設定
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

サブメニュー

Loading...
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>メニュー</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>新規作成</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>その他</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>インポート</DropdownMenuItem>
        <DropdownMenuItem>エクスポート</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

パディング

padding propでメニューの内側の余白を調整できます。

Loading...
<DropdownMenuContent padding="none">...</DropdownMenuContent>
<DropdownMenuContent padding="sm">...</DropdownMenuContent>  {/* デフォルト */}
<DropdownMenuContent padding="md">...</DropdownMenuContent>
<DropdownMenuContent padding="lg">...</DropdownMenuContent>

Props (DropdownMenuContent)

PropTypeDefaultDescription
padding'none' | 'sm' | 'md' | 'lg''sm'メニューの内側の余白
side'top' | 'right' | 'bottom' | 'left''bottom'表示位置
align'start' | 'center' | 'end''start'配置

On this page