Drawer

画面の端から出るモーダルパネル。Dialog と同じ挙動（フォーカストラップ・背景の inert 化・スクロールロック・Escape・背景クリック・閉じアニメ・フォーカス復帰）で、フィルターや詳細表示のように一覧を見たまま操作したい場面に向きます。モバイル幅では side="bottom"（ボトムシート）を推奨します。

GitHub でソースを見る

プレビュー

使いどころ

使う場面

  • 一覧や表を見ながら、行の詳細を確認・編集したいとき。背景の文脈を残せる
  • 絞り込みや設定など、画面の横から出す補助的なパネル
  • side は "right"（既定）、"left"、"bottom"。狭い画面では "bottom"。size は sm / md / lg

使わない場面

  • 短い確認や、はい・いいえの判断。Dialog を使う
  • 結果を伝えるだけ。Toast を使う
  • 画面の主な内容。常に見せたいなら Sidebar か通常のレイアウトに置く
  • ツールチップ程度の補足。Popover か HelpButton を使う

使い方

import { Button, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DrawerTitle } from "kaze-design-system";

<Drawer open={open} onOpenChange={setOpen} side="right" size="md">
  <DrawerHeader>
    <DrawerTitle>絞り込み</DrawerTitle>
  </DrawerHeader>
  <DrawerBody>
    <p>条件を選んでください。</p>
  </DrawerBody>
  <DrawerFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>
      キャンセル
    </Button>
    <Button onClick={() => setOpen(false)}>適用</Button>
  </DrawerFooter>
</Drawer>

プロパティ

名前型デフォルト説明
open必須booleanなし表示状態
onOpenChange(open: boolean) => voidなしEscape・背景クリック・閉じる操作で false が渡る。open を false にするのは呼び出し側
side"left" | "right" | "bottom""right"パネルが出てくる端。モバイル幅では bottom（ボトムシート）を推奨
size"sm" | "md" | "lg""md"left / right では幅（20rem / 28rem / 40rem）、bottom では高さの上限（40% / 60% / 90%）
aria-labelstringなしDrawerTitle を置かない場合の名前。指定すると aria-labelledby は付かない
DrawerHeader / DrawerTitle / DrawerBody / DrawerFooterHTMLAttributesなしDrawerTitle は h2 で、Drawer の aria-labelledby に自動で接続される。DrawerBody だけがスクロールする

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー動作
Tab / Shift + TabDrawer 内の操作に順にフォーカスを移す。端では反対側に回り、外には出ない
EscapeonOpenChange(false) を呼ぶ。重なっているときは最前面だけ閉じる

アクセシビリティ

  • role="dialog" と aria-modal="true" が付く。モーダルなので、背景は inert になり、スクロールも止まる
  • 名前は DrawerTitle から付く。タイトルを置かない場合は aria-label を渡す
  • 開くと最初のフォーカスできる要素に移り、閉じると開いた要素に戻る
  • 背景クリックでも閉じる。open を false にするのは呼び出し側

文言

  • DrawerTitle は対象と目的が分かる名詞にする（「注文の詳細」「絞り込み」）
  • フッターのボタンは Dialog と同じく動詞で書く（「保存する」「閉じる」）

関連するコンポーネント