Package Exports

@uiw/react-switch
@uiw/react-switch/cjs/index.js
@uiw/react-switch/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-switch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。选中时的内容支持响应式。

import { Switch } from 'uiw';
// or
import Switch from '@uiw/react-switch';

基本用法

import React from 'react';
import { Switch } from 'uiw';

const Demo = () => (
  <div>
    <Switch checked style={{ marginRight: 10 }} />
    <Switch style={{ marginRight: 10 }} />
    <Switch data-checked="开" data-unchecked="关">电源</Switch>
  </div>
);
export default Demo

Form 中使用 Switch

import React from 'react';
import { Form, Switch, Row, Col, Button, Notify } from 'uiw';

const Demo = () => (
  <Form
    onChange={({ initial, current }) => { }}
    resetOnSubmit={false}
    onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
    onSubmit={({initial, current}) => {
      console.log('switch::', initial, current)
      const ErrObj = {};
      if(Object.keys(ErrObj).length > 0) {
        const err = new Error();
        err.filed = ErrObj;
        throw err;
      }
    }}
    fields={{
      switch: {
        checked: true,
        initialValue: true,
        label: '请输入内容',
        help: '必选选项！',
        validator: value => !value ? '必填选项！' : null,
        children: <Switch style={{ maxWidth: 200 }} />,
      },
    }}
  >
    {({ fields, state, canSubmit }) => {
      return (
        <div>
          <Row>
            <Col>{fields.switch}</Col>
          </Row>
          <Row>
            <Col>
              <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
            </Col>
          </Row>
          <Row>
            <Col>
              <pre style={{ padding: 10, marginTop: 10 }}>
                {JSON.stringify(state.current, null, 2)}
              </pre>
            </Col>
          </Row>
        </div>
      );
    }}
  </Form>
);

export default Demo

设置文字

import React from 'react';
import { Switch } from 'uiw';

const Demo = () => (
  <div>
    <Switch
      data-checked="开"
      data-unchecked="关"
      onChange={(e) => {
        console.log('e', e.target.checked);
      }}
      style={{ marginRight: 10 }}
    />
  </div>
);
export default Demo

禁用状态

import React from 'react';
import { Switch } from 'uiw';

const Demo = () => (
  <div>
    <Switch disabled checked style={{ marginRight: 10 }} />
    <Switch disabled style={{ marginRight: 10 }} />
    <Switch disabled data-checked="开" data-unchecked="关">电源</Switch>
  </div>
);
export default Demo

尺寸

import React from 'react';
import { Switch } from 'uiw';

const Demo = () => (
  <div>
    <Switch size="large" style={{ marginRight: 10 }} data-checked="开" data-unchecked="关" />
    <Switch size="large" checked style={{ marginRight: 10 }} />
    <Switch style={{ marginRight: 10 }} />
    <Switch style={{ marginRight: 10 }} data-checked="开" data-unchecked="关" />
    <Switch size="small" data-checked="开" data-unchecked="关">电源</Switch>
  </div>
);
export default Demo

控制组件

通过 checked 属性改变 Switch 组件状态。

import React from 'react';
import { Switch, Button } from 'uiw';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true
    }
  }
  onChange(e) {
    console.log('~~~:::');
    this.setState({ checked: e.target.checked });
  }
  render() {
    return (
      <div style={{ backgroundColor: '#fff', margin: -15, padding: 15, borderRadius: '5px 5px 0 0' }}>
        <Switch onChange={this.onChange.bind(this)} checked={this.state.checked} style={{ marginRight: 10 }} />
        <Button
          size="small"
          type="primary"
          onClick={() => {
            this.setState({ checked: !this.state.checked });
          }}
        >
          点击按钮改变 Switch 状态
        </Button>
      </div>
    )
  }
}
export default Demo

Switch

参数	说明	类型	默认值
value	根据 value 进行比较，判断是否选中	String/Number/Boolean	-
name	用于表单对应的名称	String	-
checked	指定当前是否选中	boolean	false
disabled	是否禁用	boolean	false
onChange	变化时回调函数	Function(e:Event)	-
data-checked	选中时的内容	string/ReactNode	-
data-unchecked	非选中时的内容	string/ReactNode	-
size	开关大小，可选值：`large` `default` `small`	string	default