トグル Svelte コンポーネント

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

トグルコンポーネント

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

トグル

トグルプロパティ

プロパティ	タイプ	デフォルト	説明
<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.svelte

<script>
  import { Navbar, Page, BlockTitle, List, ListItem, Toggle } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Toggle" />
  <BlockTitle>Super Heroes</BlockTitle>
  <List simpleList strong outlineIos dividersIos>
    <ListItem>
      <span>Batman</span>
      <Toggle checked />
    </ListItem>
    <ListItem>
      <span>Aquaman</span>
      <Toggle checked color="blue" />
    </ListItem>
    <ListItem>
      <span>Superman</span>
      <Toggle checked 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 checked disabled />
    </ListItem>
    <ListItem>
      <span>Thor</span>
      <Toggle checked color="orange" />
    </ListItem>
    <ListItem>
      <span>Wonder Woman</span>
      <Toggle color="pink" />
    </ListItem>
  </List>
</Page>

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

このページ

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