Q
v0.3

Drawer

Newv0.3.0

画面下部からスライドアップするモバイル向けパネル。アクションシートやボトムシートとも呼ばれます。

基本的な使い方

下からスライドアップするドロワー

tsx
class="token keyword">import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Drawer>
  <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">DrawerContent>
    <class="token tag">DrawerHeader>
      <class="token tag">DrawerTitle>タイトル</class="token tag">DrawerTitle>
      <class="token tag">DrawerDescription>説明</class="token tag">DrawerDescription>
    </class="token tag">DrawerHeader>
    <class="token tag">div>コンテンツ</class="token tag">div>
    <class="token tag">DrawerFooter>
      <class="token tag">Button>確認</class="token tag">Button>
    </class="token tag">DrawerFooter>
  </class="token tag">DrawerContent>
</class="token tag">Drawer>

使用例

実際の使用シーン

モバイルアプリの例

iOSスタイルのアクションシート

Props API

PropTypeDefaultDescription
openboolean-開閉状態（制御モード）
onOpenChange$(open: boolean) => void-状態変更時のコールバック

Accessibility

  • Escape キーでドロワーを閉じる
  • 背景クリックで閉じる
  • フォーカストラップを実装
  • aria-modal, role='dialog' を使用
  • スワイプジェスチャーで閉じることが可能（モバイル）