Определение

Accordion (Аккордеон) — это интерактивный элемент интерфейса, который позволяет пользователю скрыть или открыть содержимое. Он состоит из заголовка и связанного с ним контента, который можно сворачивать и разворачивать при нажатии на заголовок.

Функциональность

Accordion часто используется для упорядочивания информации в компактном формате. Он позволяет пользователям скрывать или раскрывать содержимое, чтобы сосредоточиться только на нужной информации. Это особенно полезно, когда требуется представить большой объем данных, сохраняя при этом простоту и удобство использования веб-страницы или приложения.

Accordion может располагаться, как списком, так и по отдельности. Списки выстраиваются строго по вертикали.

Дизайн и Стиль

Размер и Форма

Состоит из компонентов: Заголовок и подзаголовок (Title & subtitle with visual), Слот (Slot) и Иконки (Icon)

Accordion имеет три основных размера S, M, L

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

Цвет и Контраст

Так как Accordion в большей степени дополнительно раскрывает информацию,
он не нуждается в цветовом акценте. Поэтому рекомендуется использовать стандартные цвета для текста.

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст и Иконки

Краткость текста

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

Правильно

Неправильно

Иконки (по необходимости)

В зависимости от контекста можно включать дополнительные визуализации через параметр «Leading?» компонента Заголовок и подзаголовок (Title & subtitle with visual), выбирая между набором доступных параметров

Параметры

Как использовать Слот (Slot)

Состояния

Анатомия

Для понимания анатомии входящих компонентов смотри примеры Заголовок и подзаголовок (Title & subtitle with visual), Слот (Slot)