ButtonGroup 按钮

基本用法

常规按钮组

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

圆角按钮组

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

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

  1. <nut-buttongroup 
  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-buttongroup>
  1. /deep/.menu {
  2.     .nut-button {
  3.         position: relative;
  4.         height: $btn-menu-height;
  5.         width: 100%;
  6.         padding: 0;
  7.         font-size: $btn-icon-height-small;
  8.     }
  9.     .txt-icon {
  10.         display: block;
  11.         margin: 0 auto;
  12.         width: $btn-menu-icon-height;
  13.         height: $btn-menu-icon-height;
  14.     }
  15.     .nut-badge {
  16.         flex: 1;
  17.         -webkit-flex: 1;
  18.     }
  19. }

Prop

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

ButtonGroup 按钮组 - 图1