Switch 开关组件

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

开关组件

何时使用

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

使用注意

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

• size 等于small时不支持文案和Icon设置

API

开关组件

代码示例

简单

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

查看源码在线预览

import { Switch } from "@icedesign/base";
function onChange(checked) {
  console.log("switch to " + checked);
}
ReactDOM.render(
  <div>
    <Switch checkedChildren="开" onChange={onChange} unCheckedChildren="关" />
    <br />
    <Switch defaultChecked={false} onChange={onChange} size="small" />
  </div>,
  mountNode
);

受控开关

对于受控开关, 每一次 React 数据渲染时, 都会使用传入的值来更新开关, 开关本身是不能更新自己的状态的.受控开关, 是指组件的值由上层组件决定, 如果开关定义了 value 属性, 就表示此开关是受控开关.

查看源码在线预览

import { Switch } from "@icedesign/base";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
    this.onChange = this.onChange.bind(this);
  }
  render() {
    return (
      <div>
        <div className="line">
          开关的值: {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>
    );
  }
  onChange(checked) {
    this.setState({ checked });
  }
}
ReactDOM.render(<App />, mountNode);

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

不可用

Switch 失效状态。

查看源码在线预览

import { Button, Icon, Switch } from "@icedesign/base";
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="开"
          unCheckedChildren="关"
          disabled={this.state.disabled}
        />
        <br />
        <br />
        <Button type="primary" onClick={this.toggle.bind(this)}>
          Toggle disabled
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<Test />, mountNode);

相关区块

暂无相关区块