§05-10Search & Navigation
drawer / sidesheet
画面の端から重ねて現れるパネルを開く。
一覧の文脈を保ったまま詳細や設定を見せられる。モバイルのナビゲーションや、ページ遷移させたくない補助的な編集に向く。
実装のポイント
開いている間は背景のスクロールを止め、フォーカスをドロワー内に閉じ込める。閉じたらトリガーにフォーカスを戻す。
- 特徴
- アクセシビリティ
- アニメーション
- デモで使っているもの
- motion
- lucide-react
- ソース
- drawer.tsx