Box

基础布局构建块。

查看源代码报告问题

<Box width="64px" height="64px">
  <DecorativeBox />
</Box>

API 参考

此组件基于 div 元素并支持常用 margin 属性。

只有 display 属性值是 Box 组件独有的。

属性	类型	默认值
`as`	`"div" \| "span"`	`"div"`
`asChild`	`布尔值`	无默认值
`display`	`Responsive<"none" \| "inline" \| "inline-block" \| "block">`	无默认值

以下属性在 Box、Flex、Grid、Container 和 Section 组件之间共享。有关布局组件的更多信息，请阅读布局。

属性	类型	默认值
`p`	`Responsive<枚举 \| 字符串>`	无默认值
`px`	`Responsive<枚举 \| 字符串>`	无默认值
`py`	`Responsive<枚举 \| 字符串>`	无默认值
`pt`	`Responsive<枚举 \| 字符串>`	无默认值
`pr`	`Responsive<枚举 \| 字符串>`	无默认值
`pb`	`Responsive<枚举 \| 字符串>`	无默认值
`pl`	`Responsive<枚举 \| 字符串>`	无默认值
`width`	`Responsive<字符串>`	无默认值
`minWidth`	`Responsive<字符串>`	无默认值
`maxWidth`	`Responsive<字符串>`	无默认值
`height`	`Responsive<字符串>`	无默认值
`minHeight`	`Responsive<字符串>`	无默认值
`maxHeight`	`Responsive<字符串>`	无默认值
`position`	`Responsive<枚举>`	无默认值
`inset`	`Responsive<枚举 \| 字符串>`	无默认值
`top`	`Responsive<枚举 \| 字符串>`	无默认值
`right`	`Responsive<枚举 \| 字符串>`	无默认值
`bottom`	`Responsive<枚举 \| 字符串>`	无默认值
`left`	`Responsive<枚举 \| 字符串>`	无默认值
`overflow`	`Responsive<枚举>`	无默认值
`overflowX`	`Responsive<枚举>`	无默认值
`overflowY`	`Responsive<枚举>`	无默认值
`flexBasis`	`Responsive<字符串>`	无默认值
`flexShrink`	`Responsive<枚举 \| 字符串>`	无默认值
`flexGrow`	`Responsive<枚举 \| 字符串>`	无默认值
`gridArea`	`Responsive<字符串>`	无默认值
`gridColumn`	`Responsive<字符串>`	无默认值
`gridColumnStart`	`Responsive<字符串>`	无默认值
`gridColumnEnd`	`Responsive<字符串>`	无默认值
`gridRow`	`Responsive<字符串>`	无默认值
`gridRowStart`	`Responsive<字符串>`	无默认值
`gridRowEnd`	`Responsive<字符串>`	无默认值

上一页光标

下一页Flex

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

实用程序

Box

API 参考