Navegación

Estado: Estable

Acordeón suave

Para preguntas frecuentes, políticas o el detalle de un paquete. Está hecho con details y summary, así que sin JS abre y cierra igual y la búsqueda del navegador encuentra el texto escondido. Con JS la altura crece con resorte, el contenido aparece con un fundido y el chevron gira; con single, abrir uno cierra los demás.

¿Qué llevo a mi primera clase?
Ropa cómoda, una botella de agua y calcetas antiderrapantes si vas a reformer. Los tapetes y accesorios te los prestamos.
¿Cuánto antes puedo cancelar?
Hasta 12 horas antes de la clase, sin perder tu crédito. Después de eso el lugar pasa a la lista de espera.
¿Mis créditos caducan?
Los paquetes duran 30 días desde la compra y la mensualidad se renueva cada mes. La fecha exacta está en tu perfil.

app/views/… (la demo de arriba)

<div class="w-full max-w-md">
  <%= render Ui::AccordionComponent.new(single: true, id: "accordion-demo") do |faq| %>
    <% faq.with_item(title: "¿Qué llevo a mi primera clase?", open: true) do %>
      Ropa cómoda, una botella de agua y calcetas antiderrapantes si vas a reformer.
      Los tapetes y accesorios te los prestamos.
    <% end %>
    <% faq.with_item(title: "¿Cuánto antes puedo cancelar?") do %>
      Hasta 12 horas antes de la clase, sin perder tu crédito. Después de eso el
      lugar pasa a la lista de espera.
    <% end %>
    <% faq.with_item(title: "¿Mis créditos caducan?") do %>
      Los paquetes duran 30 días desde la compra y la mensualidad se renueva cada
      mes. La fecha exacta está en tu perfil.
    <% end %>
  <% end %>
</div>

Qué hace

  • La altura se anima con el resorte "gentle"; se puede revertir a medio camino.
  • El contenido entra con fundido y 4px de desplazamiento; el chevron gira con duration-calm.
  • Sin JS, single usa el atributo name de details (exclusivo nativo).
  • Escucha el evento toggle nativo; si el navegador abre uno solo, se sincroniza.

Props

Nombre Tipo Default Descripción
single Boolean false Uno abierto a la vez (abrir uno cierra los demás, animado).
layout :unified | :separated :unified :separated pone cada pregunta en su propia tarjeta (variant: es su nombre anterior).
id String aleatorio Base del name del grupo cuando single: true.
with_item(title:, open: false, subtitle: nil) { } Slot — Un elemento; el bloque es su contenido.

Accesibilidad