トグルReactコンポーネント

Toggle Reactコンポーネントは、Toggleコンポーネントを表します。

トグルコンポーネント

以下のコンポーネントが含まれています。

トグル

トグルのプロパティ

Prop	Type	Default	Description
<Toggle> properties
init	boolean	true	トグルの初期化
name	string		トグルの入力名
value	string number		トグルの入力値
checked	boolean	false	トグル入力をチェックするかどうかを定義します。
disabled	boolean	false	トグル入力が無効であるかどうかを定義します。
readonly	boolean	false	トグル入力が読み取り専用であるかどうかを定義します。
tooltip	string		tooltip ホバー/プレス時に表示するテキスト
tooltipTrigger	string	hover	どのようにしてツールチップを開くかを定義します。hover`,` click`,` manual` のいずれかです。

トグルイベント

Event	Description
<Toggle> events
change	トグルのチェックボックスの状態が変化したときに、イベントが発生します。このイベントはタッチデバイスでは発生しないので、代わりに次の `toggle:change` イベントを使用することをお勧めします。
toggleChange	トグルのチェックボックスの状態が変更されると、イベントが発生します。

トグルメソッド

<Toggle> methods
.toggle()	Toggle checkbox state

Examples

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

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