Box

就绪

Storybook

从 v10.2.3 版本开始可用

概述

Box 组件是最基础的布局组件。它可以用于构建更复杂的组件和布局，其属性使用了我们的设计令牌。

何时使用

应使用 Box 组件替代类样式，以便我们可以利用设计令牌。它可以用于从为组件添加边距到为某个部分添加边框等任何用途。

属性

间距

margin 和 padding 属性分别用于在 box 周围或内部添加空间。margin 有 7 种不同的属性：margin、marginX、marginY、marginTop、marginRight、marginBottom 和 marginLeft。类似地，padding 有 7 种不同的属性：padding、paddingX、paddingY、paddingTop、paddingRight、paddingBottom 和 paddingLeft。可能的值：ThemeSpacingTokens (0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10)

加载中...

实时编辑器

<Box margin={1} marginY={2} marginTop={3} padding={1} paddingY={2} paddingTop={3} borderStyle='solid' borderColor='strong'>
  Content
</Box>

外观

Box 的样式可以使用以下 5 个属性定义

• borderColor，可能的值：weak、medium、strong、error、success、warning、info
• borderStyle，可能的值：solid、dashed
• borderRadius，可能的值：default、pill、circle
• backgroundColor，可能的值：canvas、primary、secondary、error、success、warning、info
• boxShadow，可能的值：z1、z2、z3

加载中...

实时编辑器

<Box borderRadius='pill' borderStyle='dashed' borderColor='strong' backgroundColor='warning' boxShadow='z1'>
  Content
</Box>

显示

有 4 个与内容显示方式相关的属性

• display，可能的值：flex、block、inline、none
• alignItems，可能的值：stretch、flex-start、flex-end、center、baseline、start、end、self-start、self-end
• justifyContent，可能的值：flex-start、flex-end、center、space-between、space-around、space-evenly、start、end、left、right
• gap，可能的值：ThemeSpacingTokens (0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10)

如果您只需要创建一个 Flex 布局，而无需对 box 进行其他样式设置，请改用Stack 组件。

加载中...

实时编辑器

<Box display='flex' alignItems='center' justifyContent='center' gap={5}>
  <span>One</span>
  <span>Two</span>
</Box>

响应性

所有上述属性都可以以响应式方式定义，这意味着会根据窗口大小设置不同的值。

要以响应式方式定义其中任何属性，只需传入一个以响应式断点作为键的对象即可。例如，不要像 margin={5} 这样定义 margin，而是定义为 margin={{ xs: 3, md: 5 }}。这意味着从 xs 断点开始，margin 设置为 3；而从 md 断点开始，则设置为 5。

主题中可能的断点可以在此处找到。

进一步阅读和资源

• Storybook 文档和属性表

演练场