KToggle

Provides toggle functionality to components.

e.g.

• on / off
• enabled / disabled
• visible / not visible

<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

Props	Type	Description
isToggled	Ref(Boolean)	The component is toggled or not
toggle	Function	Function 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.

<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

Event	returns
toggled	isToggled Boolean

<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

<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

<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

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