Switch

选择开关。Switch UI 提供与WeLink规范一致的视图。

参数说明

效果示例

import React from 'react';
import {
  CellsTitle,
  CellBody,
  CellBodyExplan,
  CellFooter,
  Form,
  FormCell,
  Switch
} from '@wecode/react-weui';

class SwitchDemo extends React.Component {
  state = {
    checked: true,
    checkedBody: true
  };

  handelChangeChecked=(key, e)=>{
    this.setState({ [key]: e.target.checked });
  }

  render() {
    const { checked, checkedBody } = this.state;
    return (
      <section>
        <CellsTitle>Switch开关</CellsTitle>
        <Form>
          <FormCell switch>
            <CellBody>主文体</CellBody>
            <CellFooter>
              <Switch checked={checked} onChange={e => this.handelChangeChecked('checked', e)} />
            </CellFooter>
          </FormCell>
          <FormCell switch>
            <CellBody>
              主文体
              <CellBodyExplan>此处是辅助说明文体，说明文本</CellBodyExplan>
            </CellBody>
            <CellFooter>
              <Switch checked={checkedBody} onChange={e => this.handelChangeChecked('checkedBody', e)} />
            </CellFooter>
          </FormCell>
        </Form>
      </section>
    );
  }
}

export default SwitchDemo;