✅Accordion

Общая информация

Аккордеон — это паттерн раскрытия и скрытия разделов контента. Постепенное раскрытие контента обеспечивает экономию пространства на странице.

Анатомия

1. Заголовок

2. Кнопка-иконка. Отвечает за сворачивание / разворачивание контентной области

3. Контентная область

Описание работы

Поведение

Несколько слоёв накладываются друг на друга. Все они скрыты, видны только их заголовки. Если одно из них нажато, чтобы сделать его активным, оно раскрывается. Другие окна в аккордеоне располагаются по верхнему или нижнему краю.

Должно быть настраиваемым поведение аккордионов при раскрытии нескольких:

• Стандартное — при открытии нового, предыдущее закрывается.

• Многоуровневое — при открытии нового, все открытые перед ним остаются в том же состоянии.

Размещение

• Аккордеоны можно размещать: внутри контейнера с содержимым (например, виджет, sidebar)

• представлять собой отдельный контейнер (с динамической высотой)

Заголовок

Рекомендуется использовать в качестве содержимого заголовка статичный контент (без интерактивности). В таком случае у пользователя не будет противоречий в интерактивности компонента (аккордеон может раскрываться по клику на всю строку-заголовок).

Однако, есть задачи, которые требуют наличия интерактивных компонентов внутри заголовка аккордеона. В таких случаях зона клика определяется правилами используемого компонента:

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

Интерактивность

Раскрытие аккордеона осуществляется по клику на строку-заголовок или на кнопку-шеврон. Зона клика в строке заголовка:

В случае наличия большого количества управляющих элементов, раскрытие и скрытие аккордеона осуществляется по клику на иконку шеврона справа, которая указывает, в каком состоянии находится аккордеон:

• шеврон указывает вниз - аккордеон свернут

• вверх - развернут.

Аккордеоны по умолчанию находятся в свернутом состоянии с закрытыми контентными областями. Затем пользователь может раскрывать каждую секцию аккордеона отдельно. Одновременно могут быть открыты несколько секций.

Свернутый

Развернутый

Когда использовать

• Для систематизации связанной информации

• Для уменьшения прокрутки области, когда видимость всего контента не принципиальна

• Когда длинный контент не может быть отображен сразу весь (например, в мобильном интерфейсе или на боковой панели)

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

• При пошаговом заполнении экрана

Не используйте аккордеон, если необходимо, чтобы пользователь увидел весь контент - это увеличит нагрузку за счет необходимости сворачивать / разворачивать разделы. Вместо этого используйте полную прокручиваемую страницу с обычными заголовками.

Размеры

Размеры и отступы могут меняться в зависимости от типа использумой сетки. Сетка может быть с 8 или 12 колонками.

Высота аккордеона может варьироваться в зависимости от решаемой задачи. Кратность высоты и ширины аккордеона - 8 рх.

Элемент	Значение
Иконки	16px * 16px
Аккордеон	Border: 1px (solid) Border-radius: 2px

Элемент	Название стиля	Гарнитура	Кегль	Начертание
Заголовок	Static_title/h4	Inter	14px	Semi Bold
Текст	Main/Body-text 14	Inter	14px	Regular

Рекомендуемые внутренние отступы - 16px.