Sheet

インポート

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@caroainc/ui-components/sheet'

Composition

Sheet
├─ SheetTrigger?
└─ SheetContent
   ├─ SheetHeader?
   │  ├─ SheetTitle
   │  └─ SheetDescription?
   ├─ 本文?
   └─ SheetFooter?
      └─ SheetClose?

SheetContentを表示する場合はSheetTitleが必須で、Trigger、本文、Footer、Closeは用途に応じて省略できます。SheetContentはPortalとOverlayを内部生成するため、Sheetの外へ出したり別のPortalで包んだりしないでください。

基本的な使い方

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">開く</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>シートタイトル</SheetTitle>
      <SheetDescription>
        シートの説明文がここに入ります。
      </SheetDescription>
    </SheetHeader>
    <div className="py-4">
      メインコンテンツ
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button>閉じる</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

表示位置

<SheetContent side="left">左から</SheetContent>
<SheetContent side="right">右から（デフォルト）</SheetContent>
<SheetContent side="top">上から</SheetContent>
<SheetContent side="bottom">下から</SheetContent>

ナビゲーション例

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">
      <Icon name="Menu" />
      メニュー
    </Button>
  </SheetTrigger>
  <SheetContent side="left" className="w-[300px]">
    <SheetHeader>
      <SheetTitle>ナビゲーション</SheetTitle>
    </SheetHeader>
    <nav className="flex flex-col gap-2 py-4">
      <Button variant="ghost" className="justify-start">
        <Icon name="Home" />
        ホーム
      </Button>
      <Button variant="ghost" className="justify-start">
        <Icon name="User" />
        プロフィール
      </Button>
    </nav>
  </SheetContent>
</Sheet>

閉じるボタンを非表示にする

showCloseButton={false} で右上の閉じるボタンを非表示にできます。フッターに独自の閉じるアクションを用意する場合などに使用します。

<SheetContent showCloseButton={false}>
  <SheetHeader>
    <SheetTitle>閉じるボタンなし</SheetTitle>
  </SheetHeader>
  <SheetFooter>
    <SheetClose asChild>
      <Button>閉じる</Button>
    </SheetClose>
  </SheetFooter>
</SheetContent>

Props (SheetContent)

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	シートの表示位置
`showCloseButton`	`boolean`	`true`	右上の閉じるボタンを表示するか
`className`	`string`	`-`	追加のCSSクラス