SStack <s-stack>

以统一的间距和对齐方式按行或列排列子元素。 SStack 是 Shopify Polaris <s-stack> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 让间距体现关系。 较小的 gap 表示项目属于同一组，较大的间距则将不同的组区分开。请选择与内容层级相匹配的间距。
• 预料到 inline stack 会换行。 使用 direction="inline" 时，项目在空间不足时会移到新的一行。这通常正是你想要的效果，但如果需要精确控制换行或多行排列，请改用其他布局方式。
• 有意识地设置对齐方式。 默认对齐方式适用于大多数布局。当项目尺寸不一或需要特定定位时，调整 alignItems 或 justifyContent。

<SStack direction="inline" gap="small-200" alignItems="center">
  <SBadge>Draft</SBadge>
  <SText>Last edited today</SText>
</SStack>

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

示例

Item 1Item 2Item 3

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

<template>
  <SStack direction="inline" gap="large" alignItems="center">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 1</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 2</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 3</SText>
    </SBox>
  </SStack>
</template>

Props

Prop	类型	说明
accessibilityLabel	string	描述元素用途或内容的标签。设置后，会向使用辅助技术的用户朗读，为其提供更多上下文。仅当元素内容不足以为使用辅助技术的用户提供上下文时才使用此项。
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	设置组件内容的语义。设置后，辅助技术会使用该角色帮助用户浏览页面。
accessibilityVisibility	"visible" | "hidden" | "exclusive"	更改元素的可见性。 - visible：元素对所有用户可见。 - hidden：元素从无障碍树中移除，但仍然可见。 - exclusive：元素在视觉上隐藏，但仍保留在无障碍树中。
alignContent	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (9 more)	控制内容换行为多行时，各行沿块轴的分布方式。此属性仅影响内容会换行的堆叠。对于单行堆叠，请改用 alignItems。
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	控制子元素沿块轴（在水平书写模式下为垂直方向）的对齐方式。用于在垂直于堆叠方向的方向上对齐项目——对于行内堆叠为垂直方向，对于块堆叠为水平方向。
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 值语法，可为每条边指定不同的宽度。
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	调整行内轴方向上元素之间的间距。它会覆盖 gap 的列值。接受： - 单个 SpacingKeyword 值，例如 large-100 - 以受支持的 SpacingKeyword 作为查询值的响应式值字符串
direction	"block" | "inline"	stack 的子元素在 stack 中的排列方向。接受： - 单个值，inline 或 block - 以支持的方向值作为查询值的响应式值字符串
display	"auto" | "none"	组件的外部 display 类型。外部类型决定组件如何参与流式布局。 - auto 组件的初始值。实际值取决于组件和上下文。 - none 隐藏组件并将其从无障碍树中移除，使屏幕阅读器无法感知。
gap	MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>	调整元素之间的间距。接受： - 同时应用于两个轴的单个 SpacingKeyword 值，例如 large-100 - 一对值，例如 large-100 large-500，分别设置行内轴和块轴 - 以受支持的 SpacingKeyword 作为查询值的响应式值字符串
inlineSize	"auto" | "0"	在水平书写模式中为宽度，在垂直书写模式中为高度。用于随文本方向自适应的流相对尺寸设置。详细了解 inline-size。
justifyContent	"normal" | "stretch" | "center" | "start" | "end" | "unsafe center" | "unsafe start" | "unsafe end" … (6 more)	控制子元素沿行内轴（在水平书写模式下为水平方向）的分布方式。用于沿堆叠的主轴定位项目——对于行内堆叠为水平方向，对于换行为多行的块堆叠为垂直方向。
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 作为查询值的响应式值字符串。
rowGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	调整块轴方向上元素之间的间距。它会覆盖 gap 的行值。接受： - 单个 SpacingKeyword 值，例如 large-100 - 以受支持的 SpacingKeyword 作为查询值的响应式值字符串

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

Slots

Slot	说明
default	显示在堆叠组件中的子元素，以一致的间距垂直或水平排列。