切换 React 组件

切换组件表示开关组件。

切换组件

包含以下组件：

Toggle

切换属性

属性	类型	默认	描述
<Toggle> 属性
init	布尔值	true	初始化切换
name	字符串		切换输入名称
值	字符串数字		切换输入值
已选中	布尔值	false	定义切换输入是否已选中
禁用	布尔值	false	定义切换输入是否禁用
只读	布尔值	false	定义切换输入是否只读
提示	字符串		提示鼠标悬停/点击时显示的文本
提示触发器	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`

切换事件

事件	描述
<Toggle> 事件
change	当切换复选框状态改变时将触发此事件。在触摸设备上可能不会发生此事件，因此最好使用 next event 代替`toggle:change`toggleChange
toggleChange	当切换复选框状态改变时将触发此事件

切换方法

<Toggle> 方法
.toggle()	切换复选框状态

示例

toggle.jsx

import React from 'react';
import { Navbar, Page, BlockTitle, List, ListItem, Toggle } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Toggle"></Navbar>
    <BlockTitle>Super Heroes</BlockTitle>
    <List simpleList strong outlineIos dividersIos>
      <ListItem>
        <span>Batman</span>
        <Toggle defaultChecked />
      </ListItem>
      <ListItem>
        <span>Aquaman</span>
        <Toggle defaultChecked color="blue" />
      </ListItem>
      <ListItem>
        <span>Superman</span>
        <Toggle defaultChecked color="red" />
      </ListItem>
      <ListItem>
        <span>Hulk</span>
        <Toggle color="green" />
      </ListItem>
      <ListItem>
        <span>Spiderman (Disabled)</span>
        <Toggle disabled />
      </ListItem>
      <ListItem>
        <span>Ironman (Disabled)</span>
        <Toggle defaultChecked disabled />
      </ListItem>
      <ListItem>
        <span>Thor</span>
        <Toggle defaultChecked color="orange" />
      </ListItem>
      <ListItem>
        <span>Wonder Woman</span>
        <Toggle color="pink" />
      </ListItem>
    </List>
  </Page>
);

改进此文档

在本页上

切换组件
切换属性
切换事件
切换方法
示例