文档演练博客

方框

基础布局构建块。

View source Report an issue

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

API 参考

¥API Reference

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

¥This component is based on the div element and supports common margin props.

只有 display prop 值对于 Box 组件是唯一的。

¥Only the display prop values are unique to the Box component.

Prop	Type	Default
`as`	`"div" \| "span"`	`"div"`
`asChild`	`boolean`	No default value
`display`	`Responsive<enum>`	No default value

以下属性在方框、弹性元素、网格、容器和部分组件之间共享。在布局中了解更多关于布局组件的信息。

¥The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.

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

Previous光标

Next弹性元素

概览

主题

布局

排版

组件

实用工具

方框

API 参考