Switch 滑动开关

在两个互斥对象进行选择，eg：选择开或关。

规则

  • 只在 List 中使用。

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

代码演示

基本

Switch. (rc-form document) 

  1. import { List, Switch } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let SwitchExample = (props) => {
  5.   const { getFieldProps } = props.form;
  6.   return (
  7.     <List
  8.       renderHeader={() => 'Form switch'}
  9.     >
  10.       <List.Item
  11.         extra={<Switch
  12.           {...getFieldProps('Switch1', {
  13.             initialValue: true,
  14.             valuePropName: 'checked',
  15.           })}
  16.           onClick={(checked) => { console.log(checked); }}
  17.         />}
  18.       >On</List.Item>
  19.       <List.Item
  20.         extra={<Switch
  21.           {...getFieldProps('Switch2', {
  22.             initialValue: false,
  23.             valuePropName: 'checked',
  24.           })}
  25.           onClick={(checked) => { console.log(checked); }}
  26.         />}
  27.       >Off</List.Item>
  28.       <List.Item
  29.         extra={<Switch
  30.           {...getFieldProps('Switch3', {
  31.             initialValue: false,
  32.             valuePropName: 'checked',
  33.           })}
  34.           onClick={(checked) => { console.log(checked); }}
  35.           disabled
  36.         />}
  37.       >Disabled off</List.Item>
  38.       <List.Item
  39.         extra={<Switch
  40.           {...getFieldProps('Switch4', {
  41.             initialValue: true,
  42.             valuePropName: 'checked',
  43.           })}
  44.           onClick={(checked) => { console.log(checked); }}
  45.           disabled
  46.         />}
  47.       >Disabled on</List.Item>
  48.       <List.Item
  49.         extra={<Switch
  50.           {...getFieldProps('Switch5', {
  51.             initialValue: false,
  52.             valuePropName: 'checked',
  53.           })}
  54.           platform="android"
  55.         />}
  56.       >Style for Android</List.Item>
  57.       <List.Item
  58.         extra={<Switch
  59.           {...getFieldProps('Switch6', {
  60.             initialValue: true,
  61.             valuePropName: 'checked',
  62.           })}
  63.           platform="ios"
  64.         />}
  65.       >Style for iOS</List.Item>
  66.     </List>
  67.   );
  68. };
  70. SwitchExample = createForm()(SwitchExample);
  72. ReactDOM.render(<SwitchExample />, mountNode);

Switch滑动开关 - 图1

API

适用平台：WEB、React-Native
属性说明类型默认值
checked是否默认选中Booleanfalse
disabled是否不可修改Booleanfalse
onChangechange 事件触发的回调函数(checked: bool): void无
name(web only)switch 的 nameString
platform (web only)设定组件的平台特有样式, 可选值为 android, ios， 默认为 cross， 即组件会自动检测设备 UA 应用不同平台的样式String'cross'
onClickclick事件触发的回调函数，当switch为disabled时，入参的值始终是默认传入的checked值。(checked: bool): void无