按钮组

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

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

进口ButtonGroup按钮“@shopify /北极星”进口反应“反应”函数ButtonGroupExample返回<ButtonGroup><按钮>取消</按钮><按钮主要的>保存</按钮></ButtonGroup>

道具

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

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

确定按钮组项之间的间距。

分段? 布尔

作为分段组加入按钮。

fullWidth? 布尔

按钮将拉伸/收缩以占据全宽度。

connectedTop? 布尔

删除左上和右边界半径。

noWrap? 布尔

防止按钮组中的按钮换行到下一行。

孩子们? 反应ReactNode

按钮组件。

最佳实践

按钮组应该:

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

内容的指导方针

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