跳转到内容 Shopify标志北极星

按钮组

按钮组显示多个相关操作堆叠或在水平行中，以帮助排列和间距。

当您有多个按钮时使用，以均匀地分隔它们。

进口｛ButtonGroup，按钮｝从“@shopify /北极星”；进口反应从“反应”；函数ButtonGroupExample（）｛返回（<ButtonGroup><按钮>取消</按钮><按钮主要>保存</按钮></ButtonGroup>）；｝

道具

想让这个功能变得更好吗?请分享你的反馈．

接口 ButtonGroupProps
间距? “extraTight”|“紧”|“宽松”

确定按钮组项之间的空间。
分段? 布尔

将按钮连接为分段组。
fullWidth? 布尔

按钮将拉伸/收缩以占据全部宽度。
connectedTop? 布尔

删除左上角和右下角的边界半径。
孩子们? 反应．ReactNode

按钮组件。

最佳实践

按钮组应该:

  • 只使用后面的按钮按钮组件中概述的最佳实践
  • 把有关系的行动呼吁集合在一起
  • 使用时要考虑到太多的行动呼吁会导致商家不确定下一步该做什么
  • 要考虑在小屏幕上多个按钮的外观和工作方式
  • 如果每个按钮包含一个没有文本的图标，则只能在最多六个按钮的组中使用

内容的指导方针

按钮组应该遵循内容的指导方针为按钮。