Checkbox

复选框组件

  • 使用方式跟原生一致, 支持disabled等原生属性。
  • 可通过label设置展示的文字。
  • 可通过defaultChecked设置默认值; 可通过checked和onChange事件配合使用手动设置输入值。
  • className属性加在外层，其余属性均赋予input元素。

主要属性和接口：

  • label:展示的文字信息, 默认空
    如：<Checkbox label='测试' />
  • defaultChecked:默认值
    如：<Checkbox defaultChecked={true} />
  • checked&onChange:
    如：<Checkbox checked={this.state.checked} onChange={()=>{this.setState({checked:false})}} />

方法

属性

事件

Extends Component
Defined in: src/checkbox/index.js:10
Module: 表单组件

Available since 2.0.0

Constructor

Checkbox

Checkbox ()

Defined in src/checkbox/index.js:10

Available since 2.0.0

Example:

import React, { Component } from "react"

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

export default class input extends Component{

    constructor(props,context){

        super(props,context);

        this.state = {
            checkboxChecked: true
        };
    }

    onCheckboxChange(){
        this.setState({
            checkboxChecked: !this.state.checkboxChecked
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Checkbox</h2>
                <h3 className="comp-type">defaultChecked 初始传值</h3>
                <div className="content">
                    <Checkbox label="香蕉" defaultChecked={true} id='banana'/>
                </div>
                <Code target="checkbox-default" />

                <h3 className="comp-type">checked和onChange配合使用</h3>
                <div className="content">
                    <Checkbox label="西瓜" checked={this.state.checkboxChecked} onChange={::this.onCheckboxChange} />
                </div>
                <Code target="checkbox-onchange" />

                <h3 className="comp-type">disabled</h3>
                <div className="content">
                    <Checkbox label="西瓜" disabled/>
                </div>
                <Code target="checkbox-disabled" />

                <h3 className="comp-type">phSize</h3>
                <div className="content">
                    <Checkbox label="请查看协议之后再决定" phSize='sm' defaultChecked={true}/>
                </div>
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/checkbox/index.js:37

样式前缀

Default:

'checkbox'

componentTag

String

Defined in src/checkbox/index.js:44

标签tagName

label

String | Element

Defined in src/checkbox/index.js:50

展示的文字信息

Default:

''

phSize

String

Defined in src/checkbox/index.js:57

大小，可选sm-14

Default:

''