跳到内容 Shopify标志 北极星

堆栈

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

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

进口{堆栈，徽章}从“@shopify /北极星”；进口反应从“反应”；函数StackExample（）{返回（<堆栈><徽章>支付</徽章><徽章>处理</徽章><徽章>实现了</徽章><徽章>完成</徽章></堆栈>）；}

道具

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

接口 StackProps
孩子们? 反应。ReactNode

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

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

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

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

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

调整元素的水平对齐。

最佳实践

栈应该:

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

堆栈项

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

堆栈项属性

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

可访问性

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