16 lines
998 B
Plaintext
16 lines
998 B
Plaintext
component Switch {
|
|
props {
|
|
class = ""
|
|
id = ""
|
|
name = ""
|
|
label = "Switch"
|
|
description = ""
|
|
checked = false
|
|
disabled = false
|
|
}
|
|
state on = checked
|
|
view {
|
|
<button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {class}"><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span><span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}"><span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}"></span></span><input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" /></button>
|
|
}
|
|
}
|