Konfy UI

vue-switch

npm

Installation

yarn add @konfy/vue-switch
EXAMPLES

Sizes: S / M / L (default m)

<vue-switch/>
<vue-switch size="s"/>
<vue-switch size="l" on/>

With label text

ON
<vue-switch size="l" on>
    <span slot="on">ON</span>
    <span slot="off">OFF</span>
</vue-switch>

Custom color with css variables

.vue-switch.custom {
    --switch-color-on: green;
    --switch-color-off: pink;
}
.vue-switch.green {
    --switch-color-on: #00BD8E;
}

props

property type default comment
name String name of the input field
on Boolean false on / off
size String m s m l
disabled Boolean disable switch
loading Boolean loading state

data

property comment
value input value

methods

method comment
toggle() toggle switch

css variables

{
 	--switch-color-on: #2181FF;
	--switch-color-off: #BBB;
	--switch-color-disabled: #F3F3F3;
}