Collapse | Design System Docs

Uso básico

El componente Collapse es ideal para preguntas frecuentes o para organizar información secundaria que no necesita estar visible todo el tiempo.

Utiliza Custom Elements de Astro para manejar el estado de forma ligera y performante.

¡Claro! De hecho, este Design System lo utiliza para organizar sus categorías de componentes.

Sí, tiene transiciones suaves de altura y opacidad integradas por defecto.

Code Snippet


import { Collapse, CollapseHeader, CollapseContent } from '@rubenvillar/design-system-astro';

<Collapse>
  <CollapseHeader>¿Es accesible?</CollapseHeader>
  <CollapseContent>
    Sí. Sigue los patrones de diseño WAI-ARIA para acordeones.
  </CollapseContent>
</Collapse>

Abierto por defecto

Puedes usar la prop open para que el componente esté expandido inicialmente.

Contenido visible desde el primer momento.

Code Snippet

<Collapse open> ... </Collapse>