トグル React コンポーネント

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

トグルコンポーネント

次のコンポーネントが含まれています

トグル

トグルプロパティ

プロパティ	タイプ	デフォルト	説明
<Toggle> プロパティ
init	boolean	true	トグルを初期化します
name	string		トグル入力の名前
value	string number		トグル入力の値
checked	boolean	false	トグル入力がチェックされているかどうかを定義します
disabled	boolean	false	トグル入力が無効になっているかどうかを定義します
readonly	boolean	false	トグル入力が読み取り専用かどうかを定義します
tooltip	string		マウスオーバー/プレス時に表示するツールチップテキスト
tooltipTrigger	string	hover	ツールチップをトリガー（開く）方法を定義します。`hover`、`click`、または`manual`にすることができます

トグルイベント

イベント	説明
<Toggle> イベント
change	トグルチェックボックスの状態が変更されたときにイベントが発生します。このイベントはタッチデバイスでは発生しない可能性があるため、代わりに次の`toggle:change`イベントを使用することをお勧めします。
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>
);

このドキュメントを改善する

このページについて

トグルコンポーネント
トグルプロパティ
トグルイベント
トグルメソッド
例