Toggle Vue Component

Toggle Components
Toggle Props
Toggle Events
Examples

Toggle Components

There are following components included:

Toggle

Toggle Props

Name	Type	Default	Description
checked	boolean	false	Defines whether the toggle input is checked or not
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'
colors.bgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.checkedBgIos	string	'bg-primary'
colors.checkedBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.checkedBorderMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.checkedThumbBgIos	string	'bg-white'
colors.checkedThumbBgMaterial	string	'bg-md-light-on-primary dark:bg-md-dark-on-primary'
colors.thumbBgIos	string	'bg-white'
colors.thumbBgMaterial	string	'bg-md-light-outline dark:bg-md-dark-outline'
component	string	'label'	Component's HTML Element
defaultChecked	boolean	false	Defines whether the toggle input is checked or not, for the case if it is uncontrolled component
disabled	boolean	false	Defines whether the toggle input is disabled or not
name	string		Toggle input name
readonly	boolean	false	Defines whether the toggle input is readonly or not
touchRipple	boolean	true	Enables touch ripple effect in Material theme
value	any		Toggle input value

Toggle Events

Name	Type	Description
change	function(e)	Toggle input `change` event handler

Examples

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>