シートSheetBeta
現在の画面を残したまま、補助的な設定・フォーム・ナビゲーションを画面端から表示する Dialog ベースのパネルです。
プレビュー
状態とバリエーション
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" | シートを表示する画面端です。 |
| portalContainer | HTMLElement | null | - | プレビューやアプリ内フレームに閉じ込めるコンテナです。 |
| overlayClassName | string | - | オーバーレイに追加するクラスです。 |
| className | string | - | シート本体に追加するクラスです。 |
| closeLabel | string | "Close" | 右上の閉じるボタンとツールチップに使うラベルです。 |
| SheetBody | React.HTMLAttributes<HTMLDivElement> | - | 長いフォーム用のスクロール領域。SheetContent の直下に置くと Content が flex 列になり、ヘッダー/フッター固定・中央スクロールになります（left/right シート）。(#293) |
設計の判断
- 既定は右から出る。資料は「PCでは左をグローバルメニュー、右を詳細やヘルプやフィルターに使うのが今の標準」と書いています。GUNJO の
SheetContentはsideの既定を右にしました。幅（size）が効くのも左右のときだけで、上下のときは指定を無視します。上下は画面幅いっぱいに出るものなので、指定できるように見えることのほうが間違いのもとだからです。 - スクロールは頼まれたときだけ組み替える。資料は「上から下まで大きく使えるのでスクロールに強い」を挙げています。GUNJO は子に
SheetBodyを置いたときだけ、中身を「動かない見出し・伸びる本文・動かない脚」の縦並びに変えます（#293）。置かない従来の書き方は、これまでと1文字も変わらない描画のままです。 - 閉じる手段と読み上げは土台に任せた。Escape と外側のクリックとフォーカスの囲い込みは Radix の Dialog が持ちます。右上の閉じるボタンの名前は
closeLabelで渡せて、渡さなければ表示中の言語の既定語になります。資料が挙げるスマホでの下方向のスワイプで閉じる操作は入っていません。
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。