§10-11Layout
モーダル (重ね)
画面の上に重ねて表示し、操作を集中させる。
元の文脈を残したまま、確認や短い入力に注意を集めたいときに使う。頻繁に開くものや長い作業には向かない。
実装のポイント
フォーカストラップ、Esc で閉じる、背景のスクロール固定、閉じた後のフォーカス復帰をセットで実装する。ネイティブの dialog 要素の showModal でも同等が得られる。
- 特徴
- アクセシビリティ
- キーボード操作
- デモで使っているもの
- shadcn/ui
§10-11Layout
画面の上に重ねて表示し、操作を集中させる。
元の文脈を残したまま、確認や短い入力に注意を集めたいときに使う。頻繁に開くものや長い作業には向かない。
フォーカストラップ、Esc で閉じる、背景のスクロール固定、閉じた後のフォーカス復帰をセットで実装する。ネイティブの dialog 要素の showModal でも同等が得られる。