コンテナContainerExperimental
ページやセクションの横幅、左右余白、中央寄せを一貫して制御するレイアウトプリミティブです。
プレビュー
状態とバリエーション
サイズ展開
sm から full / prose まで、Container が持つ最大幅の違いを確認します。
size="sm"
size="md"
size="lg"
size="xl"
size="2xl"
size="full"
size="prose"
本文幅
長文は広げすぎず、本文として読みやすい横幅に保ちます。
読みやすい本文
長文は広げすぎず、本文として読みやすい横幅に保ちます。
セクション幅
ドキュメントや通常ページの主要セクションに使う標準幅です。
リリースノート
標準的なドキュメントブロックには、セクション幅のコンテナを使います。
全幅
アプリ面や横方向の情報量が多い領域では、親幅いっぱいに広げます。
アプリ面や横スクロール可能な領域
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "prose" | "lg" | コンテンツの最大幅です。本文には prose、画面全体には full を使います。 |
| as | keyof JSX.IntrinsicElements | "div" | 描画する HTML 要素です。main、section、article などを指定できます。 |
| className | string | - | 追加の className です。 |
使い方
Loading...