ButtonGroup 使用说明

项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

ButtonGroup参数

  //children 参数可以是BaseButton、DropdownButtons、IconButton ,注意需要写明buttonName的类型

  示例：三个BaseButton按钮，分别是星期一、星期二、星期三

  state= {
    GroupData: {
        "children": [{
          "buttonName": "BaseButton" //按钮名称 BaseButton IconButton DropDownButton
            ,
          "bsStyle": "default"
            /**按钮类型(string)。参数：
                1.默认:“default”
                2.弱化按钮：“weaken”
                3.连接按钮：“link”
            **/
            ,
          "bsSize": "default"
            /**按钮尺寸(string)。参数：
                1.默认:“default”
                2.小按钮：“small”
                3.块状按钮：“block”
            **/
            ,
          "active": false
            /**是否选中(Boolean)。参数：
                1.默认未选中:false
                2.选中:true
            **/
            ,
          "disabled": false
            /**是否禁用(Boolean)。参数：
                1.默认不禁用:false
                2.禁用:true
            **/
            ,
          "href": "" /**如果该字段有定义且非空，return（<a/>）,否则return（</button>）**/ ,
          "title": "星期一" /**显示文本(string)**/ ,
          "onClick": function(target,onClick,btnInfo) {
            console.log(target);  //输出e
            console.log(onClick); //输出true
            console.log(btnInfo); //输出this.state
          },/**点击后事件回调**/ 
          "hidden": false //是否显示按钮
        }, {
          "buttonName": "BaseButton",
          "bsStyle": "default"
            /**按钮类型(string)。参数：
                1.默认:“default”
                2.弱化按钮：“weaken”
                3.连接按钮：“link”
            **/
            ,
          "bsSize": "default"
            /**按钮尺寸(string)。参数：
                1.默认:“default”
                2.小按钮：“small”
                3.块状按钮：“block”
            **/
            ,
          "active": false
            /**是否选中(Boolean)。参数：
                1.默认未选中:false
                2.选中:true
            **/
            ,
          "disabled": false
            /**是否禁用(Boolean)。参数：
                1.默认不禁用:false
                2.禁用:true
            **/
            ,
          "href": "" /**如果该字段有定义且非空，return（<a/>）,否则return（</button>）**/ ,
          "title": "星期一" /**显示文本(string)**/ ,
          "onClick": function(target,onClick,btnInfo) {
            console.log(target);  //输出e
            console.log(onClick); //输出true
            console.log(btnInfo); //输出this.state
          },/**点击后事件回调**/ 
          "hidden": false //是否显示按钮
        }, {
          "buttonName": "BaseButton",
          "bsStyle": "default"
            /**按钮类型(string)。参数：
                1.默认:“default”
                2.弱化按钮：“weaken”
                3.连接按钮：“link”
            **/
            ,
          "bsSize": "default"
            /**按钮尺寸(string)。参数：
                1.默认:“default”
                2.小按钮：“small”
                3.块状按钮：“block”
            **/
            ,
          "active": false
            /**是否选中(Boolean)。参数：
                1.默认未选中:false
                2.选中:true
            **/
            ,
          "disabled": false
            /**是否禁用(Boolean)。参数：
                1.默认不禁用:false
                2.禁用:true
            **/
            ,
          "href": "" /**如果该字段有定义且非空，return（<a/>）,否则return（</button>）**/ ,
          "title": "星期一" /**显示文本(string)**/ ,
          "onClick": function(target,onClick,btnInfo) {
            console.log(target);  //输出e
            console.log(onClick); //输出true
            console.log(btnInfo); //输出this.state
          },/**点击后事件回调**/ 
          "hidden": false //是否显示按钮
        }]
      }
  }

IconButton

{
  "buttonName" :"IconButton" 
  ,"bsStyle":"default"  /**按钮类型(string)。参数：
                              1.默认:“default”
                              2.弱化按钮：“weaken”
                              3.连接按钮：“link”,将返回一个<a></a>
                          **/
  ,"active":false  //是否激活
  ,"disabled":false  //是否禁用
  ,"href":""   //返回<a>的链接
  ,"title":"测试11"          //返回<a>的title
  ,"onClick":function(val){console.log(val)}
  ,"iconName":"sys-icon-spread"
  ,"hidden":false   //是否显示按钮
}

DropDownButton

{
      "buttonName" :"DropDownButton" 
      ,"title":"测试测试测试"   //下拉按钮上的文字
      ,"type":"text"  //下拉按钮上的文字类型 是文本，还是icon
      ,"bsSize":"default"      /**按钮尺寸(string)。参数：
                              1.默认:“default”
                              2.小按钮：“small”
                          **/       
      ,"bsStyle":"weaken"          /**按钮类型(string)。参数：
                              1.默认:者“default”
                              2.弱化按钮：“weaken”
                          **/
      ,"children":[
          {
              "value":0
              ,"text":"查看详情"
              ,"active":false
              ,"isChecked":false
          }  
          ,{
              "value":1
              ,"text":"性质维度"
              ,"active":false
              ,"isChecked":false
          } 
          ,{
              "value":2
              ,"text":"地域维度"
              ,"active":false
              ,"isChecked":false
          } 
          ,{
              "value":3
              ,"text":"包含下属"
              ,"active":false
              ,"isChecked":false
          } 
          ,{
              "value":4
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          },{
              "value":5
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          },{
              "value":6
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          },{
              "value":7
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          },{
              "value":8
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          },{
              "value":9
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          },{
              "value":10
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          },{
              "value":11
              ,"text":"不包含下属"
              ,"active":false
              ,"isChecked":false
          }
          
      ]               /** MenuItem **/
      ,"open":false         /** is open or not 首次渲染列表是否已展开**/   
      ,"disabled":false   //是否禁用
      ,"hidden":false  //是否显示按钮
      ,"iconName":"pc-sys-arrowdown-nomal-svg" //icon图标
      ,"maxWidth":""          //最大宽度，默认为"" ,超出后，超出的部分显示... ,仅对文本模式有用
      ,"direction":"right-down"  /**
                                  MenuList spread direction,one of:
                                     1."left-top"
                                     2."right-top"
                                     3."left-down"
                                     4."right-down"
                              **/
      ,"onClick":function(val){console.log(val)} /**点击后时间回调**/
      
    }

ButtonGroup调用方法

1.安装npm组件包

npm install @beisen/ButtonGroup --save-dev

2.引用组件

import ButtonGroup from "@beisen/ButtonGroup"

3. 传入参数

该参数为上述参数，传入方式使用: {...参数}

render () {
    return (
      <ButtonGroup {...this.state.GroupData} />
    )
  }