# ButtonGroup

按钮组组件

- 按钮组组件配合Button组件,提供了横、竖两种排列方式, 可选justify,tacked。
- 可通过onButtongroupChange实现点击回调。

主要属性和接口：

- phType:是否自适应宽度或者垂直排列, 默认justify
  如:

        <ButtonGroup phType="tacked">
            <Button block>tacked1</Button>
            <Button block>tacked2</Button>
        </ButtonGroup>

- onButtongroupChange:点击按钮组的回调函数。

        <ButtonGroup onButtongroupChange={function(target,html){console.log(target,html);}}>
            <Button>tacked1</Button>
            <Button>tacked2</Button>
        </ButtonGroup>

### 方法

- onButtongroupChange

### 属性

- classPrefix
- phType

### 事件

Extends Component
Defined in: `src/ButtonGroup.js:5`
Module: 基础组件

Available since 0.1.4

## Constructor

### ButtonGroup

`ButtonGroup ()`

Defined in `src/ButtonGroup.js:5`

Available since 0.1.4

#### Example:

    import React, { Component } from "react";
    import {ButtonGroup, Button} from "phoenix-ui";
    import Code from "./code/code";

    export default class buttongroup extends Component{

        onButtongroupChange(target,html){
            console.log(target);
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">ButtonGroup</h2>
                    <h3 className="comp-type">phType(默认justify) 自适应宽度或垂直排列</h3>
                    <div className="content">
                        <ButtonGroup>
                            <Button>justify1</Button>
                            <Button>justify2</Button>
                            <Button>justify3</Button>
                        </ButtonGroup>
                    </div>
                    <Code target="button-group-phtype-justify" />
                    <div className="content">
                        <ButtonGroup phType="tacked">
                            <Button block>tacked1</Button>
                            <Button block>tacked2</Button>
                            <Button block>tacked3</Button>
                        </ButtonGroup>
                    </div>
                    <Code target="button-group-phtype-tacked" />

                    <h3 className="comp-type">onButtongroupChange 点击按钮组回调函数</h3>
                    <div className="content">
                        <ButtonGroup onButtongroupChange={this.onButtongroupChange}>
                            <Button>justify1</Button>
                            <Button>justify2</Button>
                            <Button onClick={()=>{console.log(1234455);}}>justify3</Button>
                        </ButtonGroup>
                    </div>
                    <Code target="button-group-callback" />
                </div>
            );
        }
    }

## 方法

### onButtongroupChange

`onButtongroupChange ()`

Defined in `src/ButtonGroup.js:52`

按钮被按下后的回调

## 属性

### `classPrefix`

String

Defined in `src/ButtonGroup.js:38`

样式前缀

Default:

`'button-group'`

### `phType`

String

Defined in `src/ButtonGroup.js:45`

是否有自适应宽度，垂直排列等属性，取值为justify(水平排列)或者tacked(垂直排列)

Default:

`'justify'`