<Box style={{ background: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}>
<Container size="1">
<DecorativeBox>
<Box py="9" />
</DecorativeBox>
</Container>
</Box>
此组件基于 div 元素，并支持通用边距属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
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> | 无默认值 |