<Box style={{ background: 'var(--gray-a2)', borderRadius: 'var(--radius-3)' }}>
<Container size="1">
<DecorativeBox>
<Box py="9" />
</DecorativeBox>
</Container>
</Box>
このコンポーネントはdiv要素に基づいており、共通のマージンプロパティをサポートしています。
| プロパティ | 型 | デフォルト値 |
|---|---|---|
asChild | boolean | デフォルト値なし |
size | Responsive<"1" | "2" | "3" | "4"> | "4" |
display | Responsive<"none" | "initial"> | デフォルト値なし |
align | Responsive<"left" | "center" | "right"> | デフォルト値なし |
コンテナのサイズは、必要に応じてカスタマイズできる以下のmax-width値を使用します。
| サイズ | CSS変数 | 幅 |
|---|---|---|
size="1" | --container-1 | 448px |
size="2" | --container-2 | 688px |
size="3" | --container-3 | 880px |
size="4" | --container-4 | 1136px |
以下のプロパティは、Box、Flex、Grid、Container、およびSectionコンポーネントで共有されています。レイアウトに関するレイアウトコンポーネントの詳細をご覧ください。
| プロパティ | 型 | デフォルト値 |
|---|---|---|
p | Responsive<enum | string> | デフォルト値なし |
px | Responsive<enum | string> | デフォルト値なし |
py | Responsive<enum | string> | デフォルト値なし |
pt | Responsive<enum | string> | デフォルト値なし |
pr | Responsive<enum | string> | デフォルト値なし |
pb | Responsive<enum | string> | デフォルト値なし |
pl | Responsive<enum | string> | デフォルト値なし |
width | Responsive<string> | デフォルト値なし |
minWidth | Responsive<string> | デフォルト値なし |
maxWidth | Responsive<string> | デフォルト値なし |
height | Responsive<string> | デフォルト値なし |
minHeight | Responsive<string> | デフォルト値なし |
maxHeight | Responsive<string> | デフォルト値なし |
position | Responsive<enum> | デフォルト値なし |
inset | Responsive<enum | string> | デフォルト値なし |
top | Responsive<enum | string> | デフォルト値なし |
right | Responsive<enum | string> | デフォルト値なし |
bottom | Responsive<enum | string> | デフォルト値なし |
left | Responsive<enum | string> | デフォルト値なし |
overflow | Responsive<enum> | デフォルト値なし |
overflowX | Responsive<enum> | デフォルト値なし |
overflowY | Responsive<enum> | デフォルト値なし |
flexBasis | Responsive<string> | デフォルト値なし |
flexShrink | Responsive<enum | string> | デフォルト値なし |
flexGrow | Responsive<enum | string> | デフォルト値なし |
gridArea | Responsive<string> | デフォルト値なし |
gridColumn | Responsive<string> | デフォルト値なし |
gridColumnStart | Responsive<string> | デフォルト値なし |
gridColumnEnd | Responsive<string> | デフォルト値なし |
gridRow | Responsive<string> | デフォルト値なし |
gridRowStart | Responsive<string> | デフォルト値なし |
gridRowEnd | Responsive<string> | デフォルト値なし |