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