Switch

开关切换组件，仿真ios的开关控件

  • 可通过defaultChecked设置默认值。
  • 可通过checked和onChange事件配合使用手动设置输入值。
  • className属性加在外层，其余属性均赋予input元素。

主要属性和接口：

  • defaultChecked:默认值
    如：<Switch defaultChecked={true} />
  • checked&onChange:
    如：<Switch checked={this.state.checked} onChange={()=>{this.setState({checked:false})}} />
Extends Component
Defined in: src/switch/index.js:10
Module: 表单组件

Available since 0.1.0

Constructor

Switch

Switch ()

Defined in src/switch/index.js:10

Available since 0.1.0

Example:

import React, { Component } from 'react'

import Switch from 'phoenix-ui/lib/switch'
import Code from "./code/code"

export default class switchs extends Component{

    constructor(props,context){

        super(props,context);

        this.state = {
            checked: true
        };
    }

    onChange(){
        this.setState({
            checked: !this.state.checked
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Switch</h2>
                <h3 className="comp-type">开关</h3>
                <div className="content">
                    <h3 className="comp-tip">默认</h3>
                    <Switch />
                    <h3 className="comp-tip">defaultChecked 初始传值</h3>
                    <Switch defaultChecked={true} />
                    <h3 className="comp-tip">checked和onChange配合使用</h3>
                    <Switch checked={this.state.checked} onChange={this.onChange.bind(this)} />
                    <h3 className="comp-tip">disabled 不可选</h3>
                    <Switch disabled />
                </div>
                <Code target="switch" />
            </div>
        );
    }
}

属性

checked

Boolean

Defined in src/switch/index.js:47

开关值

classPrefix

String

Defined in src/switch/index.js:34

样式前缀

Default:

'switch'

defaultChecked

Boolean

Defined in src/switch/index.js:41

默认开关值

事件

onChange

Function

Defined in src/switch/index.js:53

更改值时触发的回调