Feedback · Disclosure · Stable

Collapse

Сворачиваемый блок: скрывает дополнительный контент под заголовком и раскрывает его по запросу. Два типа — Ghost без контура и Outline с рамкой, два размера, шеврон слева или справа. В шапке по отдельности включаются счётчик, переключатель, кнопка действия и разделитель. Раскрытие мгновенное.

Тип

ghost · outline
Тип
Закрыт · открыт
Ghost
Состав заявки, комиссия брокера и валюта расчётов.
Outline
Состав заявки, комиссия брокера и валюта расчётов.

Размер

md 56 · sm 48
Размер
Пример
MD
Сделки за текущий месяц с разбивкой по инструментам.
SM
Сделки за текущий месяц с разбивкой по инструментам.

Положение шеврона

left · right
Шеврон
Пример
Слева
Справа

Элементы шапки

badge · switcher · button — по отдельности
Элемент
Пример
Счётчик
Переключатель
Кнопка
Всё вместе

Разделитель

ghost — по низу блока · outline — между шапкой и контентом
Тип
Пример
Ghost
Ответы на вопросы о пополнении счёта и налоговых отчётах.
Outline
Ответы на вопросы о пополнении счёта и налоговых отчётах.

Disabled

переключение заблокировано
Тип
Пример
Ghost
Outline

Примеры

из спеки компонента

FAQ и справка

В день расчётов по сделке, отдельной строкой в отчёте брокера.

Фильтры дашборда

Последние 3 месяца

Вложенная группа

Figma 2943:7405 · группа Collapse внутри раскрытого Ghost и Outline

Ghost в Ghost

Ответы на частые вопросы о пополнении счёта, выводе средств и комиссиях.

Ghost в Outline

Отчёт формируется в разделе «Документы» после окончания налогового периода.

Правила

когда применять и когда не стоит

Обязательные поля — не внутрь

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

Равноправные представления — Tabs

Если разделы переключаются между собой, а не раскрываются дополнительно, нужны Tabs. Последовательные шаги — Stepper.

Заголовок коротко и конкретно

До ~60 символов, допускается в две строки. Без верхнего регистра, без сокращений — «Правила регистрации», а не «Регистрация».

Вложенность — один уровень

Collapse можно положить в раскрытый Collapse, как в разделе «Вложенная группа» выше (макет 2943:7405). Вложенный блок сам ничего не вкладывает: глубже пользователь теряет контекст — такой контент разбейте на блоки одного уровня.

Действия в шапке — свои

Переключатель и кнопка не раскрывают блок: у них своя зона клика. Кликабельна вся остальная шапка.

Счётчик — числом

Badge у заголовка показывает количество, например выбранных опций фильтра. Слово-статус — это Tag.

State Explorer

интерактивный перебор осей