切换 Svelte 组件

切换 Svelte 组件代表切换组件。

切换组件

包含以下组件

切换

切换属性

属性	类型	默认值	描述
<Toggle> 属性
init	布尔值	true	初始化切换
name	字符串		切换输入名称
value	字符串数字		切换输入值
checked	布尔值	false	定义切换输入是否选中
disabled	布尔值	false	定义切换输入是否禁用
readonly	布尔值	false	定义切换输入是否只读
tooltip	字符串		工具提示文本，在悬停/按下时显示
tooltipTrigger	字符串	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>

改进此文档

在此页面上

切换组件
切换属性
切换事件
切换方法
示例