切换 Svelte 组件

切换 Svelte 组件表示开关组件。

切换组件

包含以下组件：

切换属性

属性类型默认描述
<Toggle> 属性
init布尔值true初始化切换
name字符串切换输入名称
值字符串
数字		切换输入值
已选中布尔值false定义切换输入是否已选中
禁用布尔值false定义切换输入是否禁用
只读布尔值false定义切换输入是否只读
提示字符串提示鼠标悬停/点击时显示的文本
提示触发器字符串悬停定义如何触发（打开）提示。可以是hover, click或manual

切换事件

事件描述
<Toggle> 事件
change当切换复选框状态改变时将触发此事件。在触摸设备上可能不会发生此事件，因此最好使用 next event 代替toggle:changetoggleChange
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>
改进此文档
在本页上