• 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组件自动获取焦点booleanfalse
    checked指定当前是否选中booleanfalse
    checkedChildren选中时的内容string|ReactNode
    defaultChecked初始是否选中booleanfalse
    disabled是否禁用booleanfalse
    loading加载中的开关booleanfalse
    size开关大小,可选值:default smallstringdefault
    unCheckedChildren非选中时的内容string|ReactNode
    onChange变化时回调函数Function(checked:Boolean)

    方法

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