Saltar al contenido

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Acordeón controlado

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

Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.

Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.

Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.

Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.

Customized accordions

He aquí un ejemplo de personalización del componente. You can learn more about this in the overrides documentation page.

Collapsible Group Item #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

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.