Accordion

Accordion — составной компонент для группы раскрывающихся секций с общей моделью состояния на корне и частями уровня элемента для заголовков, триггеров, иконок и содержимого.

Storybook Исходники Figma

Обзор

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

Публичные CSS-переменные

Orders ship in 2–5 business days.

Переменная	Значение	Влияет на
Цвет обводки фокуса.`AccordionTrigger`		В этом состоянии изменений не видно
Нижний отступ открытого содержимого.`AccordionContent`		В этом состоянии изменений не видно
Внутренние отступы триггера в зависимости от размера.`AccordionTrigger`	—	В этом состоянии изменений не видно
Длительность поворота при открытии и закрытии.`AccordionIcon`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные на уровне частей

Accordion: сбрасывает раскладку и отступы списка.
AccordionTrigger: управляет раскладкой на всю ширину, унаследованной типографикой и кольцом фокуса.
AccordionContent: добавляет отступы в открытом состоянии, а не владеет крупной визуальной поверхностью.
AccordionIcon: поворачивается в открытом состоянии и наследует цвет окружения.

Взаимодействие состояний и вариантов

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

Примеры

.compactAccordion {
  --spacing-6: 12px;
  --spacing-7: 14px;
  --spacing-8: 16px;
}

.brandAccordion {
  --focus-color: var(--fills-primary);
  --transition-state-delay: 180ms;
}

Что не переопределять

Не убирайте обводку фокуса триггера без замены.
Не уменьшайте область нажатия триггера настолько, что кликабельными кажутся только текст или иконка.
Не делайте поворот иконки единственным сигналом открытого состояния, если подписи и так неоднозначны.