Switch 滑动开关

规则

• 只在 List 中使用。

• 避免增加额外的文案来描述当前 Switch 的值。

• 可调整 Switch 的样式来满足 app 的视觉风格。

代码演示

基本

import { List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
let SwitchExample = React.createClass({
  onClick() {
    console.log(this.props.form.getFieldsValue());
  },
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <List title="表单开关项">
        <List.Body>
          <List.Item
            extra={<Switch
              {...getFieldProps('Switch1', {
                initialValue: true,
                valuePropName: 'checked',
              })}
            />}
          >默认开</List.Item>
          <List.Item
            extra={<Switch
              {...getFieldProps('Switch2', {
                initialValue: false,
                valuePropName: 'checked',
              })}
            />}
          >默认关</List.Item>
          <List.Item
            extra={<Switch
              {...getFieldProps('Switch3', {
                initialValue: false,
                valuePropName: 'checked',
              })}
              disabled
            />}
          >默认关不可修改</List.Item>
          <List.Item
            extra={<Switch
              {...getFieldProps('Switch4', {
                initialValue: true,
                valuePropName: 'checked',
              })}
              disabled
            />}
          >默认开不可修改</List.Item>
        </List.Body>
      </List>
    );
  },
});
SwitchExample = createForm()(SwitchExample);
ReactDOM.render(<SwitchExample />, mountNode);

API