切換 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>

改進此文件

在此頁面

切換元件
切換屬性
切換事件
切換方法
範例