Accordion (panel de expansión)

Los paneles de expansión contienen flujos de creación y permiten una edición simple de un elemento.

Un panel de expansión es un contenedor liviano que puede ser ya sea único o estar conectado a una superficie más grande, como una tarjeta.

Note: Expansion panels are no longer documented in the Material Design guidelines, but Material-UI will continue to support them. Antes era conocido como "panel de expansión".

Panel de expansión simple

Acordeón controlado

Extiende el comportamiento por defecto del panel para crear un acordeón con el componente Accordion.

Customized accordions

He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

Rendimiento

The content of Accordions is mounted by default even if the panel is not expanded. Este comportamiento por defecto tiene el renderizado del lado del servidor y SEO en mente. If you render expensive component trees inside your panels or simply render many panels it might be a good idea to change this default behavior by enabling the unmountOnExit in TransitionProps:

<Accordion TransitionProps={{ unmountOnExit: true }} />

Como en cualquier optimización de rendimiento esto no es una bala de plata. Be sure to identify bottlenecks first and then try out these optimization strategies.

Accesibilidad

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)

Para óptima accesibilidad recomendamos establecer id y aria-controls en AccordionSummary. El Accordion derivará los necesarios aria-labelledby y id para la región de contenido del panel.

API

• <Accordion />
• <AccordionActions />
• <AccordionDetails />
• <AccordionSummary />