§17-01Mobile

Bottom sheet

画面下からスライドして現れるパネル。

親指が届く下部で選択や詳細を扱え、片手操作で完結する。モバイルでモーダルの代わりに短い選択や設定を出す場面で使う。

実装のポイント

下端に固定したシートを translateY で出し入れし、背景スクロールのロックとフォーカストラップを入れる。ドラッグハンドルで下に払って閉じられると手に馴染む。

このデモはボトムシート (mobile)と共通です。