Toggle Svelte Component

Toggle Svelte component represents Toggle component.

Toggle Components

There are following components included:

Toggle Properties

PropTypeDefaultDescription
<Toggle> properties
initbooleantrueInitializes Toggle
namestringToggle input name
valuestring
number
Toggle input value
checkedbooleanfalseDefines whether the toggle input is checked or not
disabledbooleanfalseDefines whether the toggle input is disabled or not
readonlybooleanfalseDefines whether the toggle input is readonly or not
tooltipstringtooltip text to show on hover/press
tooltipTriggerstringhoverDefines how to trigger (open) Tooltip. Can be hover, click or manual

Toggle Events

EventDescription
<Toggle> events
changeEvent 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
toggleChangeEvent will be triggered when toggle checkbox state changed

Toggle Methods

<Toggle> methods
.toggle()Toggle checkbox state

Examples

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>