Drawer

画面下部からスライドして表示するパネル。モバイルでの詳細表示・フィルター・アクションシートとして使う。親指で操作しやすい位置に表示できる。

インストール

npx shoji add drawer

プレビュー

使用例

モバイルではボトムシートとして機能し、デスクトップではダイアログとして機能する。 操作の流れを中断せずに補助的なUIを表示したいときに使う。

パターン

Bottom Sheet

モバイルで画面下から引き出すボトムシート。アクション選択・フィルター・共有メニューに使うモバイル定番パターン。

drawer
mobileaction-sheet

Right Panel

一覧画面の右からスライドして表示する詳細パネル。リスト → 詳細の画面遷移なし確認パターン。SaaSで頻出。

drawer
detailSaaSsplit-view

使い方

こんなときに使う

  • モバイルでの詳細パネル・フィルター・ソート（Dialog よりタップしやすい）
  • 「共有」「削除」など複数のアクションを選ばせるアクションシート
  • 地図・カレンダーなど、下から引き出して詳細を確認するUI

使わないほうがいい場面

  • デスクトップのみの環境（Dialog や Popover のほうが適切）
  • フォームの入力が多い場合（キーボード表示と重なって操作しにくい）

JP 最適化のポイント

  • スワイプダウンで閉じられるジェスチャーを実装 — iPhone のホームバーエリアとの競合に注意
  • ドロワーのタイトルは短く — 日本語は1行が長くなりやすいため、ドロワーヘッダーが窮屈になりやすい