Accordion

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

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.

Настраиваемый аккордеон

Ниже находится пример кастомизации компонента. 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.

Collapsible Group Item #2

Collapsible Group Item #3

Действия внутри аккордеона

Чтобы предотвратить сворачивание/разворачивания аккордеона при нажатии на Checkbox или на кнопку внутри AccordionSummary, необходимо прервать всплытие событий нажатия и фокуса. Также вы должны указать aria-label для действий, иначе label действия будет включен в label кнопки разворачивания аккордеона.

I acknowledge that I should stop the click event propagation

The click event of the nested action will propagate up and expand the accordion unless you explicitly stop it.

I acknowledge that I should stop the focus event propagation

The focus event of the nested action will propagate up and also focus the accordion unless you explicitly stop it.

I acknowledge that I should provide an aria-label on each action that I add

If you forget to put an aria-label on the nested action, the label of the action will also be included in the label of the parent button that controls the accordion expansion.

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

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

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

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

Подзаголовок и столбцы

Содержимое панели можно структурировать, сгруппировав его в отдельные столбцы, кроме того можно добавить подзаголовок и подсказки для пользователя.

Location

Select trip destination

Barbados

Select your destination of choice
Learn more

Доступность

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

Для оптимальной доступности мы рекомендуем установить id и aria-controls на AccordionSummary. Accordion унаследует необходимые aria-labelbyby и id для области содержимого панели.