ButtonGroup 按钮请使用手机扫码体验

基本用法

常规按钮组

  1. html
    <nut-button-group>
  2.   <nut-button 
  3.     type="light"
  4.   >
  5.     重置
  6.   </nut-button>
  7.   <nut-button>
  8.     确定
  9.   </nut-button>
  10. </nut-button-group>

圆角按钮组

  1. html
    <nut-button-group 
  2.   shape="circle"
  3. >
  4.   <nut-button 
  5.     type="light"
  6.   >
  7.     重置
  8.   </nut-button>
  9.   <nut-button>
  10.     确定
  11.   </nut-button>
  12. </nut-button-group>

页面底部功能，配合Badge使用

  1. html
    <nut-button-group 
  2.   type="menu"
  3. >
  4.   <nut-button 
  5.     type="light" 
  6.     icon="action" 
  7.     color="#f00"
  8.   >
  9.     关于
  10.   </nut-button>
  11.   <nut-button 
  12.     type="light" 
  13.     icon="more" 
  14.     color="#f00"
  15.   >
  16.     更多
  17.   </nut-button>
  18.   <nut-button 
  19.     type="light" 
  20.     icon="search" 
  21.     color="#f00"
  22.   >
  23.     关闭
  24.   </nut-button>
  25.   <nut-badge 
  26.     value="2" 
  27.     top="0.5rem" 
  28.     right="2rem"
  29.   >
  30.     <nut-button 
  31.       type="light" 
  32.       icon="trolley" 
  33.       color="#f00"
  34.     >
  35.       购物车
  36.     </nut-button>
  37.   </nut-badge>      
  38.   <nut-button 
  39.     type="light" 
  40.     icon="tick" 
  41.     color="#f00"
  42.   >
  43.     成功
  44.   </nut-button>
  45. </nut-button-group>

Prop

字段说明类型默认值
shape设置按钮组形状，可选值：circle、无String无
type设置按钮样式，可选值为：menu、无String无