Toggle Group
Group of mutually-exclusive or multi-select toggle buttons.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Group of mutually-exclusive or multi-select toggle buttons.
Uso
Compón Root, Item.
import * as ToggleGroup from "@solidiom/toggle-group"
;<ToggleGroup.Root>Contenido de Toggle Group</ToggleGroup.Root>Instalación
Instala el paquete con pnpm add @solidiom/toggle-group. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Toggle Group expone 2 partes:
- Root —
data-part="root". - Item —
data-part="item".
Estilos
Toggle Group lleva los atributos data-scope="toggle-group" 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
Este primitivo no tiene interacción con teclado. Renderiza contenido que no recibe foco ni responde a eventos de teclado de forma independiente.
Renderizado SSR e hidratación
Toggle Group 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.