开关模块,用来表示一个布尔型的值。
import React, {Component} from 'react';
import {Switch} from 'hana-ui';
/**
* @en
* Base
*
* Switch module controlled by prop `checked`
*
* @cn
* 基础
*
* 使用属性`checked`控制开关状态。
*/
export default class ExampleBase extends Component {
state = {
isChecked: true
}
render() {
return (
<Switch
checked={this.state.isChecked}
onChange={isChecked => this.setState({isChecked})}
/>
);
}
}
使用属性checked
控制开关状态。
import React, {Component} from 'react';
import {Switch} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';
/**
* @en
* auto
*
* Switch module controlled by itself, using prop `auto`
*
* @cn
* 自控模式
*
* 开关可以添加属性`auto`来自行控制状态。
*/
export default class ExampleAuto extends Component {
state = {
checked: true
}
render() {
return (
<ExampleBlock
en={<p>You changed the state, now it is<b className="sign"> {`${this.state.checked}`}</b></p>}
cn={<p>现在的状态为<b className="sign"> {`${this.state.checked ? '开' : '关'}`}</b></p>}
>
<Switch
auto
defaultChecked={this.state.checked}
onChange={checked => this.setState({checked})}
/>
</ExampleBlock>
);
}
}
开关可以添加属性auto
来自行控制状态。
现在的状态为 开
import React, {Component} from 'react';
import {Switch, Checkbox} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';
/**
* @en
* Disabled
*
* Use prop `disabled` to disable the `Switch`.
*
* @cn
* 禁用
*
* 使用属性`disabled`来禁用开关。
*/
export default class ExampleBase extends Component {
state = {
disabled: true
}
render() {
return (
<ExampleBlock
en={<Checkbox
label={`I am${this.state.disabled ? '' : ' not'} disabled`}
checked={this.state.disabled}
onChange={(event, isChecked) => this.setState({disabled: isChecked})}
/>}
cn={<Checkbox
label={`我现在${this.state.disabled ? '' : '没有'}被禁用`}
checked={this.state.disabled}
onChange={(event, isChecked) => this.setState({disabled: isChecked})}
/>}
>
<Switch
auto
disabled={this.state.disabled}
/>
</ExampleBlock>
);
}
}
使用属性disabled
来禁用开关。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
checked | bool | 开关是否开启 | |
defaultChecked | bool | false | 默认是否开启 |
disabled | bool | false | 是否被禁用 |
onChange | function | () => {} | 开关状态改变时触发的回调函数 (Boolean isChecked) => void |
auto | bool | false | 是否启用自控模式 |
className | string | 开关的class |
未在文档中说明的属性将会被自动加到根元素或form元素上。