# @beisen-cmps/button-group
> 平台按钮分组组件
Latest version **0.0.3** (published 2018-05-16) · ISC license · 0 weekly downloads
## Install
```sh
npm install @beisen-cmps/button-group
pnpm add @beisen-cmps/button-group
yarn add @beisen-cmps/button-group
bun add @beisen-cmps/button-group
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-05-16 |
| First published | 2018-04-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |
## Links
- npm: https://www.npmjs.com/package/@beisen-cmps/button-group
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-button-group
- npm.io page: https://npm.io/package/@beisen-cmps/button-group
## Dependencies (5)
- [react](https://npm.io/package/react.md) ^15.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.1
- [@beisen-cmps/base-button](https://npm.io/package/@beisen-cmps/base-button.md) 0.0.9
- [@beisen-cmps/icon-button](https://npm.io/package/@beisen-cmps/icon-button.md) 0.0.5
- [@beisen-cmps/dropdown-button](https://npm.io/package/@beisen-cmps/dropdown-button.md) 0.0.1
## Recent versions
- 0.0.3 (latest) — 2018-05-16
- 0.0.1 — 2018-05-16
- 0.0.2 — 2018-04-26
## README
# ButtonGroup 使用说明
## 项目运行
1. cnpm install 或 npm install cnpm使用教程
2. npm run dev （开发环境打包 port:8080）
3. npm run test （测试用例）
4. npm run build （生产环境打包）
## ButtonGroup参数
```
//children 参数可以是base-button、dropdown-buttons、icon-button ,注意需要写明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（）,否则return（）**/ ,
"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（）,否则return（）**/ ,
"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（）,否则return（）**/ ,
"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”,将返回一个
**/
,"active":false //是否激活
,"disabled":false //是否禁用
,"href":"" //返回的链接
,"title":"测试11" //返回的title
,"onClick":function(val){console.log(val)}
,"iconName":"sys-icon-spread"
,"hidden":false //是否显示按钮
}
```
### DropDownButton
```
{
"buttonName" :"DropDownButton" ,
"title": "测试测试测试" //下拉按钮上的文字
,
"type": "icon" //下拉按钮上的文字类型 是文本，还是icon
,
"textIcon": true
, //textIcon为true，文字带图标，否则无图标
"bsSize": "small"
/**按钮尺寸(string)。参数：
1.默认:“default”
2.小按钮：“small”
**/
,
"bsStyle": "weaken"
/**按钮类型(string)。参数：
1.默认:者“default” 蓝色背景
2.弱化按钮：“weaken” 灰色背景
**/
,
"isBtnStyle":true //采用非Button样式,默认为true，非button样式： 按钮18X18px 无阴影，边框，hover状态
,"children":[
{
"value":0
,"text":"查看详情"
,"active":false
,"isChecked":false
}
,{
"value":1
,"text":"性质维度"
,"active":false
,"isChecked":false
}
] /** MenuItem **/
,"open":false /** is open or not 首次渲染列表是否已展开**/
,"disabled":false //是否禁用
,"hidden":false //是否显示按钮
,"iconName":"pc-sys-arrowdown-nomal-svg" //icon图标
,"maxWidth":"20px" //最大宽度，默认为"" ,超出后，超出的部门显示...
,"autoDirection":false //下拉菜单自适应位置 默认为自适应
,"direction":"right-down" /**
MenuList spread direction,one of:
1."left-top"
2."right-top"
3."left-down"
4."right-down"
**/
,"onClick": function(value,target,onClick,btnInfo) {
console.log(value); //输出val
console.log(target); //输出e
console.log(onClick); //输出true
console.log(btnInfo); //输出this.state
} /**点击后时间回调**/
}
```
## ButtonGroup调用方法
1.安装npm组件包
```
npm install @beisen/button-group --save-dev
```
2.引用组件
```
import ButtonGroup from "@beisen/button-group"
```
3. 传入参数
该参数为上述参数，传入方式使用: {...参数}
```
render () {
return (
)
}
```
---
_Source: https://npm.io/package/@beisen-cmps/button-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._