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
        renderHeader={() => '表单开关项'}
      >
        <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>
    );
  },
});
SwitchExample = createForm()(SwitchExample);
ReactDOM.render(<SwitchExample />, mountNode);

API ( 适用平台：WEB、React-Native )