• Switch 开关

    开关选择器。

    何时使用

    代码演示

    最简单的用法。
    expand code expand code
    import { Switch } from 'choerodon-ui';
    
    function onChange(checked) {
      console.log(`switch to ${checked}`);
    }
    
    ReactDOM.render(
      <Switch defaultChecked onChange={onChange} />,
      mountNode
    );
    
    带有文字和图标。
    expand code expand code
    import { Switch } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
        <br />
        <Switch checkedChildren="1" unCheckedChildren="0" />
      </div>,
      mountNode);
    
    标识开关操作仍在执行中。
    expand code expand code
    import { Switch } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Switch loading defaultChecked />
        <br />
        <Switch size="small" loading />
      </div>,
      mountNode);
    
    Switch 失效状态。
    expand code expand code
    import { Switch, Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        disabled: true,
      }
    
      toggle = () => {
        this.setState({
          disabled: !this.state.disabled,
        });
      }
    
      render() {
        return (
          <div>
            <Switch disabled={this.state.disabled} defaultChecked />
            <br />
            <Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    size="small" 表示小号开关。
    expand code expand code
    import { Switch } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Switch defaultChecked />
        <br />
        <Switch size="small" defaultChecked />
      </div>,
      mountNode);
    

    API

    参数 说明 类型 默认值
    autoFocus 组件自动获取焦点 boolean false
    checked 指定当前是否选中 boolean false
    checkedChildren 选中时的内容 string|ReactNode
    defaultChecked 初始是否选中 boolean false
    disabled 是否禁用 boolean false
    loading 加载中的开关 boolean false
    size 开关大小,可选值:default small string default
    unCheckedChildren 非选中时的内容 string|ReactNode
    onChange 变化时回调函数 Function(checked:Boolean)

    方法

    名称 描述
    blur() 移除焦点
    focus() 获取焦点