Toggle Svelte Component
Toggle Svelte component represents Toggle component.
Toggle Components
There are following components included:
Toggle
Toggle Properties
Prop | Type | Default | Description |
---|---|---|---|
<Toggle> properties | |||
init | boolean | true | Initializes Toggle |
name | string | Toggle input name | |
value | string number | Toggle input value | |
checked | boolean | false | Defines whether the toggle input is checked or not |
disabled | boolean | false | Defines whether the toggle input is disabled or not |
readonly | boolean | false | Defines whether the toggle input is readonly or not |
Toggle Events
Event | Description |
---|---|
<Toggle> events | |
change | Event will be triggered when toggle checkbox state changed. This event may not occur on touch devices, so it is better to use next toggle:change event instead |
toggleChange | Event will be triggered when toggle checkbox state changed |
Toggle Methods
<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>