表示页面内容的一个部分。
<Box
py="8"
style={{ backgroundColor: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}
>
<DecorativeBox asChild>
<Section size="2" />
</DecorativeBox>
</Box>
此组件基于 section 元素，并支持 常见的边距属性。
| Prop | Type | Default |
|---|---|---|
asChild | boolean | No default value |
size | Responsive<"1" | "2" | "3" | "4"> | "3" |
display | Responsive<"none" | "initial"> | No default value |
以下属性是 Box、Flex、Grid、Container 和 Section 组件之间共享的。有关布局组件的更多信息，请阅读 布局。
| Prop | Type | Default |
|---|---|---|
p | Responsive<enum | string> | No default value |
px | Responsive<enum | string> | No default value |
py | Responsive<enum | string> | No default value |
pt | Responsive<enum | string> | No default value |
pr | Responsive<enum | string> | No default value |
pb | Responsive<enum | string> | No default value |
pl | Responsive<enum | string> | No default value |
width | Responsive<string> | No default value |
minWidth | Responsive<string> | No default value |
maxWidth | Responsive<string> | No default value |
height | Responsive<string> | No default value |
minHeight | Responsive<string> | No default value |
maxHeight | Responsive<string> | No default value |
position | Responsive<enum> | No default value |
inset | Responsive<enum | string> | No default value |
top | Responsive<enum | string> | No default value |
right | Responsive<enum | string> | No default value |
bottom | Responsive<enum | string> | No default value |
left | Responsive<enum | string> | No default value |
overflow | Responsive<enum> | No default value |
overflowX | Responsive<enum> | No default value |
overflowY | Responsive<enum> | No default value |
flexBasis | Responsive<string> | No default value |
flexShrink | Responsive<enum | string> | No default value |
flexGrow | Responsive<enum | string> | No default value |
gridArea | Responsive<string> | No default value |
gridColumn | Responsive<string> | No default value |
gridColumnStart | Responsive<string> | No default value |
gridColumnEnd | Responsive<string> | No default value |
gridRow | Responsive<string> | No default value |
gridRowStart | Responsive<string> | No default value |
gridRowEnd | Responsive<string> | No default value |