トグルSvelteコンポーネント

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

トグルコンポーネント

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

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

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


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