Switch

Vista previa

Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).

Interruptor binario con semántica de encendido/apagado.

#Uso

Compón Root, Thumb.

import * as Switch from "@solidiom/switch"

;<Switch.Root>Contenido de Switch</Switch.Root>

#Instalación

Instala el paquete con pnpm add @solidiom/switch. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes

Switch expone 2 partes:

• Root — data-part="root".
• Thumb — data-part="thumb".

#Estilos

Switch lleva los atributos data-scope="switch" y data-part en cada parte para la selección CSS/receta. Los atributos de estado como data-state, data-disabled y data-highlighted se exponen donde corresponda.

#Interacción con teclado

#Renderizado SSR e hidratación

Switch se renderiza como HTML semántico durante el renderizado en servidor. El comportamiento interactivo (manejadores de teclado, gestión de estado) se activa en la hidratación sin desplazamiento de diseño.

solidiom add switch