Skip to content
On this page

KToggle

Provide 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>
1
2
3
4
5

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.

yes
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>
1
2
3
4
5

Events

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

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const sayHello = (isToggled: boolean): void => {
      alert('hello! the toggled is set to: ' + isToggled)
    }

    return { sayHello }
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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>
1
2
3
4
5
6
7
8

Collapse/Expand

html
<KToggle v-slot="{isToggled, toggle}">
  <div>
    <KButton @click="toggle">
      {{ isToggled.value ? 'collapse' : 'expand' }}
    </KButton>
    <KAlert v-if="isToggled.value" class="mt-3" alertMessage="Every day, once a day, give yourself a present." />
  </div>
</KToggle>
1
2
3
4
5
6
7
8

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" class="mt-3" alertMessage="Every day, once a day, give yourself a present." />
        </transition>
      </div>
</KToggle>
1
2
3
4
5
6
7
8
9
10

Released under the Apache-2.0 License.