Skip to content

Accordion

Secciones expandibles. Modo single (uno a la vez) o multiple. Ítems pueden ir disabled.

Preview principal

ACCORDIONmultiple

Añade devsoftec-ui como dependencia e importa los componentes. Fuentes y estilos se cargan con el paquete.

abiertos: q1 · chevron + aria-expanded

Modos

multiple = varios paneles; single = uno cierra el anterior.

MODE

multiple

Detalle, disponibilidad y variantes.

Estándar o expreso a domicilio.

single

Detalle, disponibilidad y variantes.

Deshabilitado

disabled en un ítem: no abre ni recibe clic.

DISABLED

Contenido accesible.

Uso

Section titled “Uso”
import { Accordion } from "devsoftec-ui";


<Accordion
  items={[
    { value: "q1", title: "¿Cómo instalo?", content: "Añade la dependencia…" },
    { value: "q2", title: "Tema", content: "Usa ThemeProvider / data-theme." },
  ]}
  multiple
  defaultValue={["q1"]}
/>

Props

Section titled “Props”
Prop Tipo Default Descripción
items { value, title, content, disabled? }[] — Paneles
value string[] — Abiertos (controlado)
defaultValue string[] [] Abiertos iniciales
multiple boolean false Varios abiertos a la vez
onValueChange (value: string[]) => void — Al cambiar

Comportamiento

Section titled “Comportamiento”
  • Trigger: aria-expanded + aria-controls
  • Panel: role="region" + aria-labelledby
  • Animación con grid-template-rows; respeta prefers-reduced-motion