UiToggle

A wrapper component that provides an easy way to switch between two states

Features ✨

• Vue 3
• Renders no wrapper element
• Simple API
• Can be controlled or uncontrolled

Props ⚙

Name	Type	Default	Description
modelValue	Boolean	undefined	Used internally by v-model
disabled	Boolean	undefined	This is used to completely disable the UiToggle component from trigerring a change

Structure 🏗

<slot />

Slot 🎰

Name	Payload	Description
default	{ active: Boolean, toggle: Function }	This is a required slot that should have only 1 wrapper element

Examples 💁‍♂️

Simplest form

<div id='app'>
 <UiToggle v-slot="{toggle, active}">
  <button @click="toggle">
    I am active: {{active}}
  </button>
 </UiToggle>
</div>

With v-model

<div id='app'>
 <UiToggle v-slot="{toggle}" v-model='toggleState'>
  <button @mouseenter="toggle" >
    I am active: {{toggleState}}
  </button>
 </UiToggle>
</div>

Disabled (will silently not toggle)

<div id='app'>
 <UiToggle v-slot="{toggle, active}" disabled>
  <button @click="toggle" >
    I am active: {{active}}
  </button>
 </UiToggle>
</div>

With an active class

<div id='app'>
 <UiToggle v-slot="{toggle, active}">
  <button @click="toggle" :class="{'is-active primary': active}">
    {{active ? 'Yup' : 'Nope'}}
  </button>
 </UiToggle>
</div>

With two seperate elements to set the state of toggleState

<div id='app'>
 <UiToggle v-slot="{toggle}" v-model='toggleState'>
  <div :class="{primary: toggleState}">
    <button @click='()=> toggle(true)'>
      I set the state to true!
    </button>
    
    <div @mouseenter='()=> toggle(false)'>
      I set the state to false!
    </div>
  </div>
 </UiToggle>
</div>