SBox `<s-box>`

用于设置内边距、背景、边框、圆角和尺寸的通用容器。 SBox 是 Shopify Polaris <s-box> web component 的带类型 Vue 3 wrapper。

import { SBox } from 'polaris-vue-elements'

最佳实践

将其用作通用容器。 SBox 负责处理用于组织内容的间距、边框和背景。当需要特定排列方式（例如行或列）时，请改用 SStack 或 SGrid。
先看看有没有语义更明确的组件。 如果 SSection 或 SBanner 之类的组件已经能描述内容的性质，请优先使用它们。专用组件的意图更清晰，无障碍支持也更好。
为小屏幕做好规划。 在桌面端看起来正常的布局可能在移动端出问题，因此请使用响应式值来调整间距和布局，而不是固定尺寸。
描述区域和交互内容。 当一个 box 标记了一个独立区域或包含交互内容时，请设置 accessibilityRole 和 accessibilityLabel，让屏幕阅读器用户能够理解并浏览该结构。
保持较浅的嵌套。 box 层层嵌套会让标记变得复杂，样式也难以维护。请寻找更简单的结构或更合适的布局组件。

vue

<SBox accessibilityRole="region" accessibilityLabel="Shipping summary" padding="base" border="base">
  <!-- … -->
</SBox>

参阅 Shopify 关于 <s-box> 的最佳实践（英文）以获取完整指南。

示例

background="subdued"

background="strong"

bordered box

vue

<script setup>
import { SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>background="subdued"</SText>
    </SBox>
    <SBox background="strong" padding="base" borderRadius="200">
      <SText>background="strong"</SText>
    </SBox>
    <SBox
      background="base"
      padding="base"
      borderRadius="200"
      borderWidth="small"
      borderColor="strong"
      borderStyle="solid"
    >
      <SText>bordered box</SText>
    </SBox>
  </div>
</template>

Props

Prop	类型	说明
`accessibilityLabel`	`string`	描述元素用途或内容的标签。设置后，会向使用辅助技术的用户朗读，为其提供更多上下文。仅当元素内容不足以为使用辅助技术的用户提供上下文时才使用此项。
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	设置组件内容的语义。设置后，辅助技术会使用该角色帮助用户浏览页面。
`accessibilityVisibility`	`"visible" \| "hidden" \| "exclusive"`	更改元素的可见性。 - `visible`：元素对所有用户可见。 - `hidden`：元素从无障碍树中移除，但仍然可见。 - `exclusive`：元素在视觉上隐藏，但仍保留在无障碍树中。
`background`	`"subdued" \| "base" \| "strong" \| "transparent"`	组件的背景色。
`blockSize`	`"auto" \| "0"`	元素在标准布局中的垂直尺寸（在从左到右或从右到左的书写模式中为高度）。block 尺寸会根据书写方向调整：在水平布局中控制高度；在垂直布局中控制宽度。这确保了在不同文本方向下行为一致。详细了解 block-size。
`border`	`BorderShorthand`	使用简写语法在单个属性中同时指定宽度、颜色和样式的边框。
`borderColor`	`"subdued" \| "base" \| "strong"`	使用设计系统色阶的边框颜色。设置后，会覆盖 `border` 属性中指定的颜色值。可从 `subdued`、`base` 或 `strong` 中选择，以匹配所需的视觉强调程度。
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	使用设计系统圆角刻度设置元素各角的圆角程度。支持1 到 4 值语法，可为每个角指定不同的圆角半径。用于创建圆角或完全圆形的元素。
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	所有边的边框样式，例如实线、虚线或点线。设置后，会覆盖 `border` 属性中指定的样式值。支持1 到 4 值语法，可为每条边指定不同的样式。
`borderWidth`	`"" \| MaybeAllValuesShorthandProperty<"base" \| "small-100" \| "small" \| "large" \| "large-100" \| "none">`	所有边的边框粗细。设置后，会覆盖 `border` 属性中指定的宽度值。支持1 到 4 值语法，可为每条边指定不同的宽度。
`display`	`"auto" \| "none"`	组件的外部 display 类型。外部类型决定组件如何参与流式布局。 - `auto` 组件的初始值。实际值取决于组件和上下文。 - `none` 隐藏组件并将其从无障碍树中移除，使屏幕阅读器无法感知。
`inlineSize`	`"auto" \| "0"`	在水平书写模式中为宽度，在垂直书写模式中为高度。用于随文本方向自适应的流相对尺寸设置。详细了解 inline-size。
`maxBlockSize`	`"none" \| "0"`	在水平书写模式中为最大高度，在垂直书写模式中为最大宽度。防止元素增长超过此尺寸。详细了解 max-block-size。
`maxInlineSize`	`"none" \| "0"`	在水平书写模式中为最大宽度，在垂直书写模式中为最大高度。防止元素增长超过此尺寸。详细了解 max-inline-size。
`minBlockSize`	`"0"`	在水平书写模式中为最小高度，在垂直书写模式中为最小宽度。防止元素缩小到此尺寸以下。详细了解 min-block-size。
`minInlineSize`	`"0"`	在水平书写模式中为最小宽度，在垂直书写模式中为最小高度。防止元素缩小到此尺寸以下。详细了解 min-inline-size。
`overflow`	`"visible" \| "hidden"`	设置元素的溢出行为。 - `hidden`：当内容大于元素的容器时裁剪内容。元素将不可滚动，用户无法通过拖动或使用鼠标滚轮访问被裁剪的内容。 - `visible`：超出元素容器的内容可见。
`padding`	`MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>`	应用于组件所有边的内边距。支持使用流相对值的1 到 4 值语法： - 1 个值应用于所有边 - 2 个值分别应用于 block（上/下）和 inline（左/右） - 3 个值分别应用于 block-start（上）、inline（左/右）和 block-end（下） - 4 个值分别应用于 block-start（上）、inline-end（右）、block-end（下）和 inline-start（左）示例：* `base`、`large none`、`base large-100 base small` 使用 `auto` 可从最近的已移除内边距的容器继承内边距。也接受以支持的 `PaddingKeyword` 作为查询值的响应式值字符串。
`paddingBlock`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	块方向的内边距（在水平书写模式下为上和下）。接受用于两侧的单个值，或以空格分隔的两个值，分别对应 block-start 和 block-end。示例：* `large none` 将 `large` 应用于顶部，将 `none` 应用于底部。覆盖 `padding` 中的块方向值。也接受以受支持的 `PaddingKeyword` 作为查询值的响应式值字符串。
`paddingBlockEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	block-end 内边距（在水平书写模式下为底部）。覆盖 `paddingBlock` 中的 block-end 值。也接受以受支持的 `PaddingKeyword` 作为查询值的响应式值字符串。
`paddingBlockStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	block-start 内边距（在水平书写模式下为顶部）。覆盖 `paddingBlock` 中的 block-start 值。也接受以受支持的 `PaddingKeyword` 作为查询值的响应式值字符串。
`paddingInline`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	内联方向的内边距（在水平书写模式中为左右）。接受一个值同时用于两侧，或用空格分隔的两个值分别用于 inline-start 和 inline-end。示例：* `large none` 将 `large` 应用于左侧，将 `none` 应用于右侧。会覆盖 `padding` 中的内联值。也接受以支持的 `PaddingKeyword` 作为查询值的响应式值字符串。
`paddingInlineEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	inline-end 内边距（在 LTR 书写模式中为右侧，在 RTL 中为左侧）。会覆盖 `paddingInline` 中的 inline-end 值。也接受以支持的 `PaddingKeyword` 作为查询值的响应式值字符串。
`paddingInlineStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	inline-start 内边距（在 LTR 书写模式中为左侧，在 RTL 中为右侧）。会覆盖 `paddingInline` 中的 inline-start 值。也接受以支持的 `PaddingKeyword` 作为查询值的响应式值字符串。

为便于阅读，上面部分类型列已被截断；完整的联合类型见库中生成的 TypeScript 类型（src/lib/generated/types.ts）。

Slots

Slot	说明
`default`	显示在 box 组件中的内容，该组件是一个灵活的容器，用于组织其他组件并为其设置样式。

SBox <s-box> ​

最佳实践 ​

示例 ​

Props ​

Slots ​

SBox `<s-box>`

最佳实践

示例

Props

Slots