Estructura y Layout
Accordion
Contenedor animado de expandir/colapsar usando transiciones CSS grid. Soporta dirección vertical y horizontal.
Tests
100%
Uso
El componente SAccordion proporciona animaciones suaves de expansión y colapso usando transiciones CSS grid. Envuelve contenido y anima su visibilidad basándose en la prop open. Por defecto anima horizontalmente; usa vertical para el comportamiento típico de acordeón de arriba a abajo.
Vertical
Cuando la prop vertical está activada, el contenido se expande y colapsa a lo largo del eje vertical usando grid-template-rows. Este es el patrón más común para interfaces tipo acordeón.
Horizontal
Sin la prop vertical, el contenido se expande y colapsa a lo largo del eje horizontal usando grid-template-columns. Útil para paneles laterales o animaciones de revelado.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
open | boolean | - | Controla si el contenido está expandido o colapsado. Requerida. |
vertical | boolean | false | Cuando es true, anima verticalmente (filas). Cuando es false, anima horizontalmente (columnas). |
class | string | - | Clases CSS personalizadas aplicadas al elemento raíz. |
Slots
| Nombre | Descripción |
|---|---|
default | El contenido a expandir o colapsar. |