切換 React 元件

切換 React 元件代表切換元件。

切換元件

包含以下元件

切換

切換屬性

屬性	類型	預設值	說明
<Toggle> 屬性
init	布林值	真	初始化切換
名稱	字串		切換輸入名稱
值	字串數字		切換輸入值
已勾選	布林值	假	定義切換輸入是否已勾選
已停用	布林值	假	定義切換輸入是否已停用
唯讀	布林值	假	定義切換輸入是否為唯讀
工具提示	字串		工具提示懸停/按壓時顯示的文字
工具提示觸發器	字串	懸停	定義如何觸發 (開啟) 工具提示。可以是 `hover`、`click` 或 `manual`

切換事件

事件	說明
<Toggle> 事件
變更	切換核取方塊狀態變更時會觸發事件。觸控裝置上可能不會發生此事件，因此建議改用下一個 `toggle:change` 事件
切換變更	切換核取方塊狀態變更時會觸發事件

切換方法

<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>
);

改善此文件

在此頁面

切換元件
切換屬性
切換事件
切換方法
範例