Skip to content

KToggle

Provides toggle functionality to components.

e.g.

  • on / off
  • enabled / disabled
  • visible / not visible
html
<KToggle v-slot="{isToggled, toggle}">
  <KButton @click="toggle">
    {{ isToggled.value ? 'Toggled' : 'Not toggled' }}
  </KButton>
</KToggle>

Props

toggled

The toggled state that the component should begin with.

  • Default: false

Slots

  • default - content to toggle.

Slot Props

PropsTypeDescription
isToggledRef(Boolean)The component is toggled or not
toggleFunctionFunction to toggle

You can trigger the toggle function to switch the state in any way you'd like. For instance, here we are toggling the state on mouseover and toggling back on mouseout.

html
<KToggle v-slot="{isToggled, toggle}" :toggled="true">
  <div :style="{color: isToggled.value ? 'green' : 'red'}" @mouseover="toggle" @mouseout="toggle">
    {{ isToggled.value ? 'Yes' : 'No' }}
  </div>
</KToggle>

Events

Eventreturns
toggledisToggled Boolean
html
<template>
  <KToggle v-slot="{ toggle }" @toggled="sayHello">
    <KButton @click="toggle">Keep clicking me</KButton>
  </KToggle>
</template>

<script setup lang="ts">
const sayHello = (isToggled: boolean): void => {
  alert('Hello! The toggled is set to: ' + isToggled)
}
</script>

Usage

KToggle is meant to be used to add behavior to other components, by wrapping them and placing them inside KToggle's default slot.

KModal


html
<KToggle v-slot="{ isToggled, toggle }">
  <div>
    <KButton @click="toggle">
      Show Modal
    </KButton>
    <KModal :isVisible="isToggled.value" title="Look Mah!" content="I got toggles!" @proceed="toggle" @canceled="toggle" />
  </div>
</KToggle>

Collapse/Expand


html
<KToggle v-slot="{isToggled, toggle}">
  <div>
    <KButton @click="toggle">
      {{ isToggled.value ? 'Collapse' : 'Expand' }}
    </KButton>
    <KAlert v-if="isToggled.value" alertMessage="Every day, once a day, give yourself a present." />
  </div>
</KToggle>

Toggle with Animation


html
<KToggle v-slot="{isToggled, toggle}">
  <div>
    <KButton @click="toggle">
      {{ isToggled.value ? 'Collapse' : 'Expand' }}
    </KButton>
    <transition name="expand">
      <KAlert v-if="isToggled.value" alertMessage="Every day, once a day, give yourself a present." />
    </transition>
  </div>
</KToggle>

Released under the Apache-2.0 License.