Socket
Book a DemoInstallSign in
Socket

@uiw/react-switch

Package Overview
Dependencies
Maintainers
2
Versions
172
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-switch

Switch component

4.22.3
latest
Source
npmnpm
Version published
Maintainers
2
Created
Source

Switch 开关

Buy me a coffee Open in unpkg NPM Downloads npm version

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

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

基本用法

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

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

Form 中使用 Switch

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

export default function Demo() {
  return (
    <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>
  );
}

设置文字

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

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

禁用状态

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

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

尺寸

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

export default function Demo() {
  return (
    <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>
  );
}

控制组件

通过 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指定当前是否选中booleanfalse
disabled是否禁用booleanfalse
onChange变化时回调函数Function(e:Event)-
data-checked选中时的内容string/ReactNode-
data-unchecked非选中时的内容string/ReactNode-
size开关大小,可选值:large default smallstringdefault

Keywords

switch

FAQs

Package last updated on 29 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.