跳到内容 Shopify标志北极星

遗留的堆栈

这是Stack组件的遗留版本，正在更新为更灵活和可组合的API。用于布局水平排列的组件或实现无麻烦的垂直居中。堆栈由灵活的项组成，这些项包裹着堆栈的每个子元素。选项提供了对堆栈中项的换行、间距和相对大小的控制。

遗产

这是一个遗留组件，将被弃用。新AlphaStack组件可以与新的布局原语结合使用，以实现与LegacyStack类似的结果。了解更多有关组件生命周期．

用于快速布置组件的水平行并保持它们的相对尺寸。在小屏幕上，子行可以根据需要自动换行。

进口｛LegacyStack，徽章｝从“@shopify /北极星”；进口反应从“反应”；函数LegacyStackExample（）｛返回（<LegacyStack><徽章>支付</徽章><徽章>处理</徽章><徽章>实现了</徽章><徽章>完成</徽章></LegacyStack>）；｝

道具

想要帮助完善这个功能吗?请分享你的反馈．

接口 LegacyStackProps
孩子们? 反应．ReactNode

要在堆栈中显示的元素。
包装? 布尔

在小屏幕上根据需要将堆栈元素包装到额外的行中(默认为true)。
垂直? 布尔

垂直堆叠元素。
间距? “extraTight”|“紧”|“baseTight”|“宽松”|“extraLoose”|“没有”

调整元素之间的间距。
对齐? “领导”|“拖尾”|“中心”|“填满”|“基线”

调整元素的垂直对齐。
分布? “equalSpacing”|“领导”|“拖尾”|“中心”|“填满”|“fillEvenly”

调整元素的水平对齐。

最佳实践

栈应该:

  • 当您想要一行组件在小屏幕宽度上进行包装时，可用于小规模布局任务
  • 用于垂直居中两个元素
  • 不适用于复杂或独特的组件排列
  • 不用于大规模页面布局

堆栈项

堆栈组件将把包装在堆栈项组件中的多个元素视为一个项。默认情况下，每个单独的元素都被视为一个堆栈项。在单个堆栈项组件上使用填充道具，使其填充剩余的可用水平空间。请参阅“堆栈中单个项填充剩余空间”示例。

堆栈项属性

道具 类型 描述 默认的
填满 布尔 用项目填充堆栈中可用的水平空间 假
孩子们 任何 要在堆栈项中显示的元素

可访问性

堆栈组件仅用于对齐，不为辅助技术提供任何结构信息。要传达特定项之间的关系，可以考虑使用列表组件．