Accordion
Last updated
Was this helpful?
Last updated
Was this helpful?
Аккордеон — это паттерн раскрытия и скрытия разделов контента. Постепенное раскрытие контента обеспечивает экономию пространства на странице.
Заголовок
Кнопка-иконка. Отвечает за сворачивание / разворачивание контентной области
Контентная область
Несколько слоёв накладываются друг на друга. Все они скрыты, видны только их заголовки. Если одно из них нажато, чтобы сделать его активным, оно раскрывается. Другие окна в аккордеоне располагаются по верхнему или нижнему краю.
Должно быть настраиваемым поведение аккордионов при раскрытии нескольких:
Стандартное — при открытии нового, предыдущее закрывается.
Многоуровневое — при открытии нового, все открытые перед ним остаются в том же состоянии.
Аккордеоны можно размещать: внутри контейнера с содержимым (например, виджет, 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.