Q
v0.3

Sheet

Newv0.3.0

画面端からスライドインするパネル。ナビゲーション、フォーム、詳細情報の表示に使用します。

基本的な使い方

右側からスライドインするシート

tsx
class="token keyword">import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Sheet>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">Button>シートを開く</class="token tag">Button>
  </class="token tag">div>
  <class="token tag">SheetContent>
    <class="token tag">SheetHeader>
      <class="token tag">SheetTitle>タイトル</class="token tag">SheetTitle>
      <class="token tag">SheetDescription>説明</class="token tag">SheetDescription>
    </class="token tag">SheetHeader>
    <class="token tag">div>コンテンツ</class="token tag">div>
    <class="token tag">SheetFooter>
      <class="token tag">Button>保存</class="token tag">Button>
    </class="token tag">SheetFooter>
  </class="token tag">SheetContent>
</class="token tag">Sheet>

スライド方向

4方向からスライドイン可能

右（デフォルト）
左
上
下

使用例

実際の使用シーン

Props API

PropTypeDefaultDescription
side"top" | "bottom" | "left" | "right""right"スライドインする方向
openboolean-開閉状態（制御モード）
onOpenChange$(open: boolean) => void-状態変更時のコールバック

Accessibility

  • Escape キーでシートを閉じる
  • 背景クリックで閉じる（モーダル時）
  • フォーカストラップを実装
  • aria-modal, role='dialog' で適切にマークアップ
  • 閉じた後、トリガー要素にフォーカスを戻す