Accordion

Аккордеоны содержат потоки создания и позволяют осуществить легковесное редактирование элемента.

Аккордеон это простой контейнер, который может использоваться как самостоятельно, так и внутри более крупного компонента, такого как Card (карточка).

На заметку: Аккордеоны больше не задокументированы в руководствах Material Design, но Material-UI будет продолжать поддерживать их. Ранее они были известны как "expansion panels".

Простой аккордеон

Accordion 1

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

Accordion 2

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

Disabled Accordion

Контролируемый аккордеон

Используя компонент Accordion, расширив его поведение по умолчанию, можно получить "аккордеон".

General settings

I am an accordion

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

Users

You are currently not an owner

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

Advanced settings

Filtering has been entirely disabled for whole web server

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

Personal data

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

Кастомизированные аккордеоны

Ниже находится пример кастомизации компонента. Вы можете узнать об этом больше в документации по переопределению свойств.

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.

Collapsible Group Item #2

Collapsible Group Item #3

Производительность

Содержимое аккордеонов монтируется по умолчанию, даже если панель не развернута. Это поведение подразумевает рендеринг на стороне сервера и SEO. Если внутри аккордеона находятся ресурсоемкие, для рендеринга, иерархии компонентов или просто на странице много аккордеонов, то возможно хорошей идеей будет изменить поведение по умолчанию включив unmountOnExit в TransitionProps:

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

Как и при любой оптимизации производительности, эта функция не панацея. Сначала идентифицируйте узкие места и лишь затем пытайтесь применить эти стратегии.

Доступность

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