Определение

Modal header (Шапка окна) — это верхняя часть Диалогового окна (Dialog) или Боковой панели (Drawer), которая содержит заголовок или краткое описание содержимого. Служит для информирования пользователя о цели окна.

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

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

Может включать элементы управления, такие как кнопка закрытия (крестик) или дополнительные действия (например, кнопка возвращения назад).

В некоторых случаях в Modal Header можно добавить вспомогательную информацию, такую как описание или счетчик, через настройки компонента Заголовок и подзаголовок (Title & Subtitile), что помогает пользователям глубже понять контекст или задачу.

Обычно фиксирован в верхней части Диалогового окна (Dialog) или Боковой панели (Drawer), даже если контент прокручивается. Это гарантирует, что пользователь всегда видит заголовок и может взаимодействовать с элементами управления, не теряя фокус.

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

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

Состоит из компонентов: Кнопка (Button), Заголовок и подзаголовок (Title & subtitle), Разделитель (Divider).

Компонент имеет три основных размера: S, M и L.

Длина компонента адаптируется в зависимости от того, в каком элементе интерфейса он используется. Это позволяет компоненту выглядеть естественно и гармонично в разных частях системы, обеспечивая удобство и единый стиль для пользователя.

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

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

Варианты

Параметры

Анатомия

Для понимания анатомии входящих компонентов смотри примеры Кнопка (Button), Заголовок и подзаголовок (Title & subtitle), Разделитель (Divider).