シートSheetBeta

現在の画面を残したまま、補助的な設定・フォーム・ナビゲーションを画面端から表示する Dialog ベースのパネルです。

状態とバリエーション

詳細設定や補助フォームを右から表示します。

モバイルメニューなどを左から表示します。

狭い画面で補助操作を下から表示します。

短い通知設定や補助操作を上から表示します。

SheetBody を直下に置くと、ヘッダー/フッターは固定され中央だけがスクロールします。

表は横にスクロールできます

プロパティ	型	初期値	説明
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)

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。