Kongponents

# KToggle

Provide toggle functionality to components.

e.g.

  • on / off
  • enabled / disabled
  • visible / not visible
<KToggle v-slot="{isToggled, toggle}">
  <KButton @click="toggle">
    {{ isToggled ? '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 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.

yes 
<KToggle v-slot="{isToggled, toggle}" :toggled="true">
  <div
    :style="{color: isToggled ? 'green' : 'red'}"
    @mouseover="toggle" 
    @mouseout="toggle">
    {{ isToggled ? '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>
export default {
  methods: {
    sayHello(isToggled) {
      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"
      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 ? 'collapse' : 'expand' }}
    </KButton>
    <KAlert 
      v-if="isToggled" 
      class="mt-3" 
      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 ? 'collapse' : 'expand' }}
        </KButton>
        <transition name="expand">
          <KAlert
            v-if="isToggled" 
            class="mt-3"
            alertMessage="Every day, once a day, give yourself a present." />
        </transition>
      </div>
</KToggle>

← Komponent →