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>

方法

属性

事件

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'