UI Component Lab English

← コンポーネント一覧

オーバーレイ

Drawer ドロワー

画面の端からページの上にすべり出てくるパネル。

絞り込み

別名

見分けるポイント

左右どちらか（上下のこともある）の端に沿った縦長のパネルで、後ろのページは暗くなる。

挙動

  • メニューや絞り込みのアイコンなど、ボタンから開く。
  • 開いている間は後ろのページを操作できない。Esc か閉じるボタンで閉じ、フォーカスは開いたボタンに戻る。
  • ナビゲーションメニュー、絞り込み、カートなどに使う。
  • このデモはネイティブのモーダル <dialog> を右端に寄せたもの。

キーボード操作

キー動作
Enter / Spaceボタンからドロワーを開く。
Tab / Shift + Tabドロワー内の操作できる要素の間を移動する。
Escドロワーを閉じ、ボタンにフォーカスを戻す。

使い分け・注意点

  • メニューボタンなどから開き、背後にオーバーレイを敷き、閉じるボタンを付ける。

出典