<Box
py="8"
style={{ backgroundColor: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}
>
<DecorativeBox asChild>
<Section size="2" />
</DecorativeBox>
</Box>
此组件基于 section 元素，并支持通用外边距属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | 响应式<"1" | "2" | "3" | "4"> | "3" |
display | 响应式<"none" | "initial"> | 无默认值 |
以下属性在 Box、Flex、Grid、Container 和 Section 组件之间共享。阅读更多关于布局组件的信息，请参考布局。
| 属性 | 类型 | 默认值 |
|---|---|---|
p | 响应式<enum | string> | 无默认值 |
px | 响应式<enum | string> | 无默认值 |
py | 响应式<enum | string> | 无默认值 |
pt | 响应式<enum | string> | 无默认值 |
pr | 响应式<enum | string> | 无默认值 |
pb | 响应式<enum | string> | 无默认值 |
pl | 响应式<enum | string> | 无默认值 |
width | 响应式<string> | 无默认值 |
minWidth | 响应式<string> | 无默认值 |
maxWidth | 响应式<string> | 无默认值 |
height | 响应式<string> | 无默认值 |
minHeight | 响应式<string> | 无默认值 |
maxHeight | 响应式<string> | 无默认值 |
position | 响应式<enum> | 无默认值 |
inset | 响应式<enum | string> | 无默认值 |
top | 响应式<enum | string> | 无默认值 |
right | 响应式<enum | string> | 无默认值 |
bottom | 响应式<enum | string> | 无默认值 |
left | 响应式<enum | string> | 无默认值 |
overflow | 响应式<enum> | 无默认值 |
overflowX | 响应式<enum> | 无默认值 |
overflowY | 响应式<enum> | 无默认值 |
flexBasis | 响应式<string> | 无默认值 |
flexShrink | 响应式<enum | string> | 无默认值 |
flexGrow | 响应式<enum | string> | 无默认值 |
gridArea | 响应式<string> | 无默认值 |
gridColumn | 响应式<string> | 无默认值 |
gridColumnStart | 响应式<string> | 无默认值 |
gridColumnEnd | 响应式<string> | 无默认值 |
gridRow | 响应式<string> | 无默认值 |
gridRowStart | 响应式<string> | 无默认值 |
gridRowEnd | 响应式<string> | 无默认值 |