KongponentsKToggle
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>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.
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>Events
| Event | returns |
|---|---|
toggled | isToggled 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>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>