Selectores
Switch
Un componente de interruptor toggle construido sobre HeadlessUI con soporte para etiqueta, descripción e iconos.
Tests
100%
Uso
El componente SSwitch proporciona un interruptor toggle estilizado construido sobre HeadlessUI. Soporta etiquetas, descripciones, iconos y modo pasivo.
Invertido
Usa la prop reverse para colocar el switch en el lado derecho con la etiqueta a la izquierda.
Pasivo
Cuando passive está habilitado, hacer clic en la etiqueta o descripción no cambia el switch. Solo hacer clic en el switch mismo cambia el valor.
Con Icono
Establece la prop icon en true para mostrar iconos de check/cruz por defecto dentro del botón del switch.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
modelValue | boolean | - | El estado actual del toggle. Requerido. |
reverse | boolean | false | Coloca el switch en el lado derecho de la etiqueta. |
passive | boolean | false | Previene que los clics en la etiqueta/descripción cambien el switch. |
icon | boolean | FunctionalComponent | - | Muestra iconos por defecto cuando es true, o un componente de icono personalizado para ambos estados. |
iconOn | FunctionalComponent | - | Componente de icono personalizado para el estado ON. |
iconOff | FunctionalComponent | - | Componente de icono personalizado para el estado OFF. |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
update:modelValue | boolean | Se emite cuando el switch es alternado. |
Slots
| Nombre | Descripción |
|---|---|
default | El texto de la etiqueta del switch. |
description | Texto de descripción adicional debajo de la etiqueta. |