Switch 开关组件

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

开关组件

何时使用

开/关切换器切换单个设置选项的状态。开关控制器中的选项，以及它所在的状态，应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。

使用注意

• 对于checkChildren和unCheckedChildren的自定义要考虑文字大小，因为switch的宽度有限，默认一个汉字大小。如果设置成多个字或者英文要注意宽度控制。

API

Switch

键盘支持

• 支持键盘控制，tab选中后按回车进行状态切换。

ARIA and KeyBoard

代码示例

简单

最简单的用法,size可设置大小。

查看源码在线预览

import { Switch } from '@alifd/next';
function onChange(checked) {
    console.log(`switch to ${checked}`);
}
ReactDOM.render(<div>
    <Switch checkedChildren="on" onChange={onChange} unCheckedChildren="off" />
    <br />
    <Switch defaultChecked={false} onChange={onChange} size="small" />
    <br />
    <Switch className="large-width" checkedChildren="on" onChange={onChange} unCheckedChildren="off please" />
</div>,
mountNode);

.large-width {
    width: 100px;
}

受控开关

受控开关, 是指组件的值由上层组件决定, 如果开关定义了 value 属性, 就表示此开关是受控开关.

对于受控开关, 每一次 React 数据渲染时, 都会使用传入的值来更新开关, 开关本身是不能更新自己的状态的.

查看源码在线预览

import { Switch } from '@alifd/next';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false
        };
        this.onChange = this.onChange.bind(this);
    }
    onChange(checked) {
        this.setState({checked});
    }
    render() {
        return (<div>
            <div className="line">value of switch: {this.state.checked ? 'true' : 'false'}</div>
            <div className="line">
                <Switch checked={this.state.checked} onChange={this.onChange} />
                <Switch checked={this.state.checked} onChange={this.onChange} disabled />
            </div>
        </div>);
    }
}
ReactDOM.render(
    <App />,
    mountNode
);

.line {
  margin-bottom: 10px;
}
.next-switch {
  margin-right: 20px;
}

不可用

Switch 失效状态。

查看源码在线预览

import { Button, Icon, Switch } from '@alifd/next';
class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: true
        };
    }
    toggle() {
        this.setState(Object.assign({}, this.state, {
            disabled: !this.state.disabled
        }));
    }
    render() {
        return (<div>
            <Switch checkedChildren={<Icon type="select" size="small" />}
                unCheckedChildren={<Icon type="close" size="small" />} disabled={this.state.disabled} />
            <Switch checkedChildren="on" unCheckedChildren="off" disabled={this.state.disabled} />
            <br />
            <br />
            <Button type="primary" onClick={this.toggle.bind(this)}>Toggle disabled</Button>
        </div>);
    }
}
ReactDOM.render(<Test />, mountNode);

无障碍

组件内部已支持无障碍，设置aria-label对组件进行描述。

查看源码在线预览

import { Switch } from '@alifd/next';
function onChange(checked) {
    console.log(`switch to ${checked}`);
}
ReactDOM.render(<div>
    <Switch checkedChildren="on" onChange={onChange} unCheckedChildren="off" aria-label="accessible switch"/>
</div>,
mountNode);

.large-width {
    width: 100px;
}

相关区块

暂无相关区块