切換 Vue 元件

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

切換元件

包含以下元件

切換

切換屬性

名稱	類型	預設值	描述
checked	布林值	false	定義切換輸入是否被勾選
colors	物件		具有 Tailwind CSS 顏色類別的物件
colors.bgIos	字串	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'
colors.bgMaterial	字串	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.borderMaterial	字串	'border-md-light-outline dark:border-md-dark-outline'
colors.checkedBgIos	字串	'bg-primary'
colors.checkedBgMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.checkedBorderMaterial	字串	'border-md-light-primary dark:border-md-dark-primary'
colors.checkedThumbBgIos	字串	'bg-white'
colors.checkedThumbBgMaterial	字串	'bg-md-light-on-primary dark:bg-md-dark-on-primary'
colors.thumbBgIos	字串	'bg-white'
colors.thumbBgMaterial	字串	'bg-md-light-outline dark:bg-md-dark-outline'
component	字串	'label'	元件的 HTML 元素
defaultChecked	布林值	false	定義切換輸入是否被勾選，用於非受控元件的情況
disabled	布林值	false	定義是否禁用切換輸入
name	字串		切換輸入名稱
readonly	布林值	false	定義切換輸入是否為唯讀
touchRipple	布林值	true	在 Material 主題中啟用觸摸漣漪效果
value	任意		切換輸入值

切換事件

名稱	類型	描述
change	function(e)	切換輸入 `change` 事件處理器

範例

Toggle.vue

<template>
  <k-page>
    <k-navbar title="Toggle" />

    <k-list strong inset>
      <k-list-item label title="Item 1">
        <template #after>
          <k-toggle
            component="div"
            class="-my-1"
            :checked="checked1"
            @change="() => (checked1 = !checked1)"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Item 2">
        <template #after>
          <k-toggle
            component="div"
            class="-my-1 k-color-brand-red"
            :checked="checked2"
            @change="() => (checked2 = !checked2)"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Item 3">
        <template #after>
          <k-toggle
            component="div"
            class="-my-1 k-color-brand-green"
            :checked="checked3"
            @change="() => (checked3 = !checked3)"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Item 4">
        <template #after>
          <k-toggle
            component="div"
            class="-my-1 k-color-brand-yellow"
            :checked="checked4"
            @change="() => (checked4 = !checked4)"
          />
        </template>
      </k-list-item>
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kList,
    kListItem,
    kToggle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kList,
      kListItem,
      kToggle,
    },
    setup() {
      const checked1 = ref(true);
      const checked2 = ref(true);
      const checked3 = ref(true);
      const checked4 = ref(true);
      return {
        checked1,
        checked2,
        checked3,
        checked4,
      };
    },
  };
</script>