按钮组
按钮组显示多个相关操作堆叠或在一个水平行中,以帮助排列和间隔。
当您有多个按钮以均匀地分隔它们时使用。
进口{ButtonGroup,按钮}从“@shopify /北极星”;进口反应从“反应”;函数ButtonGroupExample(){返回(<ButtonGroup><按钮>取消</按钮><按钮主要的>保存</按钮></ButtonGroup>);}
道具
想要帮助完善这个功能吗?请分享你的反馈.
接口
ButtonGroupProps
- 间距? “extraTight”|“紧”|“宽松”
-
确定按钮组项之间的间距。
- 分段? 布尔
-
作为分段组加入按钮。
- fullWidth? 布尔
-
按钮将拉伸/收缩以占据全宽度。
- connectedTop? 布尔
-
删除左上和右边界半径。
- noWrap? 布尔
-
防止按钮组中的按钮换行到下一行。
- 孩子们? 反应.ReactNode
-
按钮组件。
最佳实践
按钮组应该:
- 选项后面的按钮按钮组件中概述的最佳实践
- 将有关系的行动呼吁组合在一起
- 使用时要考虑到太多的行动呼吁会导致商家不确定下一步该做什么
- 要考虑多个按钮在小屏幕上的外观和工作方式
- 如果按钮包含一个没有文本的图标,则只能在最多六个按钮的组中使用
内容的指导方针
按钮组应遵循内容的指导方针为按钮。