ButtonGroup

按钮组组件

  • 按钮组组件配合Button组件,提供了横、竖两种排列方式, 可选default,justify,segmente,tacked,footer。
  • 可通过index设置默认的选中索引值。
  • 可通过clickCallback实现点击回调，default和footer模式下不支持clickCallback。

主要属性和接口：

  • phType:是否自适应宽度或者垂直排列, 默认default
    如:
      <ButtonGroup phType='tacked'>
      <Button block>tacked1</Button>
      <Button block>tacked2</Button>
  </ButtonGroup>
    index:默认的选中索引值, 默认0
    如:
      <ButtonGroup phType='justify' index={1}>
      <Button>justify</Button>
      <Button>justify</Button>
  </ButtonGroup>
  • clickCallback:点击按钮组的回调函数。
      <ButtonGroup clickCallback={(target,html)=>{console.log(target,html);}}>
      <Button>tacked1</Button>
      <Button>tacked2</Button>
  </ButtonGroup>

方法

属性

事件

Extends Component
Defined in: src/button-group/index.js:10
Module: 基础组件

Available since 0.1.4

Constructor

ButtonGroup

ButtonGroup ()

Defined in src/button-group/index.js:10

Available since 0.1.4

Example:

import React, { Component } from "react"

import ButtonGroup from "phoenix-ui/lib/button-group"
import Checkbox from "phoenix-ui/lib/checkbox"
import Button from "phoenix-ui/lib/button"
import Code from "./code/code"

export default class buttongroup extends Component{

    clickCallback(index){
        alert(index);
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">ButtonGroup</h2>
                <h3 className="comp-type">phType(默认default) 自适应宽度</h3>
                <div className="content">
                    <div className="comp-tip">default</div>
                    <ButtonGroup>
                        <Button phSize="lg">确定</Button>
                        <Button phSize="lg" phStyle="gray" hollow >取消</Button>
                    </ButtonGroup>
                </div>
                <Code target="button-group-phtype-default" />

                <div className="content">
                    <div className="comp-tip">justify 横向满行</div>
                    <ButtonGroup phType="justify">
                        <Button>justify1</Button>
                        <Button>justify2</Button>
                    </ButtonGroup>
                    <ButtonGroup phType="justify">
                        <Button phStyle='gray'>是</Button>
                        <Button phStyle='gray'>否</Button>
                    </ButtonGroup>
                </div>
                <Code target="button-group-phtype-justify" />

                <div className="content">
                    <div className="comp-tip">segmente 行内元素，每一个标签固定宽度</div>
                    <ButtonGroup phType="segmente">
                        <Button>标签1</Button>
                        <Button>标签2</Button>
                        <Button>标签3</Button>
                    </ButtonGroup>
                </div>
                <Code target="button-group-phtype-segmente" />

                <div className="content">
                    <div className="comp-tip">tacked</div>
                    <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">index 选中的索引</h3>
                <div className="content">
                    <ButtonGroup phType="justify" index={1}>
                        <Button>justify1</Button>
                        <Button>justify2</Button>
                        <Button>justify3</Button>
                    </ButtonGroup>
                </div>
                <Code target="button-group-index" />

                <h3 className="comp-type">clickCallback 点击按钮组回调函数</h3>
                <div className="content">
                    <ButtonGroup phType="justify" clickCallback={this.clickCallback}>
                        <Button>justify1</Button>
                        <Button>justify2</Button>
                        <Button>justify3</Button>
                    </ButtonGroup>
                </div>
                <Code target="button-group-callback" />

                <h3 className="comp-type">extra 更多内容</h3>
                <ButtonGroup phType="footer" extra={<Checkbox phSize='sm' label={<span>更多内容<a href='#'>连接</a><i>重要</i></span>} />}>
                    <Button phSize="lg">确定</Button>
                </ButtonGroup>
            </div>
        );
    }
}

方法

clickCallback

clickCallback
(
  • index
)

Defined in src/button-group/index.js:80

按钮被按下后的回调

参数:

index Number

选中的索引值
参数名类型标识描述
index Number

选中的索引值

属性

classPrefix

String

Defined in src/button-group/index.js:52

样式前缀

Default:

'button-group'

extra

Object

Defined in src/button-group/index.js:73

更多内容，传递的类型是react element

Default:

null

index

Number

Defined in src/button-group/index.js:59

默认索引值

Default:

0

phType

String

Defined in src/button-group/index.js:66

是否有自适应宽度，垂直排列等属性，取值为default(用于双按钮)、justify(水平排列)、tacked(垂直排列)、segmente(分割排列)、footer(尾部按钮)

Default:

'default'