BetaBeta pública — Consulta las notas de lanzamiento
Documentación

Collapsible

Single expandable/collapsible section.

Paquete
@solidiom/collapsible
Versión
0.0.1-next.0
Estado
stable

Vista previa

Single expandable/collapsible section.

Uso

Compón Root, Trigger, Content.

import * as Collapsible from "@solidiom/collapsible"

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

Instalación

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

Partes

Collapsible expone 3 partes:

  • Rootdata-part="root".
  • Triggerdata-part="trigger".
  • Contentdata-part="content".

Estilos

Collapsible lleva los atributos data-scope="collapsible" 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.

Composición

Collapsible está diseñado para componerse con otras primitivas. Sus partes pueden combinarse con Field, Button u otras primitivas según sea necesario.

Renderizado SSR e hidratación

Collapsible 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.