Определение

Page header (Шапка страницы) — это компонент интерфейса, который отображает верхний уровень заголовков и ключевую информацию на странице. Он помогает пользователю быстро понять контекст и цель страницы, а также ориентироваться в содержимом, особенно на страницах с большим количеством данных или функционала.

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

Отображает главный заголовок, который сообщает пользователю, на какой странице
он находится.

В зависимости от контекста может содержать такие компоненты, как: Хлебные крошки (Breadcrumbs) для быстрого возврата на предыдущие страницы, Вкладки (Tabs) для быстрой навигации внутри страницы.

Дополнительно может содержать описание, вспомогательные действия со страницей, например “Создать”, “Удалить” и т.д., поиск, фильтры и т.п., которые можно добавить через компонент Слот (Slot) в специально отведенные секции.

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

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

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

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

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

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

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

Варианты и параметры

Простой заголовок

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

Использование хлебных крошек

Если пользователь прошел через несколько уровней страниц, в верхней части появляется компонент Хлебных крошек (Breadcrumbs), который позволяет быстро вернуться к предыдущим разделам или страницам, улучшая навигацию и делая процесс взаимодействия более удобным.

Иконка, статус и вариативные функции

Визуальные элементы перед заголовком (Leading visuals?) являются необязательными и отображаются в начале заголовка. Это могут быть иконки, аватары или другие настраиваемые визуальные элементы, подходящие для небольшой области

Страница, если она, например, представляет собой документ, может отображать текущий статус документа (например, «В черновике» или «Опубликован»), который можно включить через параметр Trailing visual?.

Также через параметр Advanced action?, который представлен в виде компонента Слот (Slot) может быть добавлена возможность редактирования названия в режиме инлайн.

Верхнеуровневые функции

В зависимости от контекста страница может содержать кнопки, которые настраиваются опционально и от требований. Включаются параметром Action bar? и вставляется с помощью компонента Слот (Slot)

Подзаголовок

Если требуется добавить пояснение или указать второстепенную информацию, можно использовать параметр Description?. Он позволяет вставить нужные данные с помощью компонента Слот (Slot), предоставляя гибкость в отображении дополнительной информации рядом с заголовком страницы.

Вкладки

Если страница содержит несколько разделов, для удобства навигации можно включить компонент Вкладки (Tabs). Это позволяет пользователю легко переключаться между разделами страницы, оставаясь в одном и том же контексте, что улучшает взаимодействие с содержимым и делает интерфейс более понятным и структурированным.

При этом параметр Разделитель (Divider) должен быть выключен

Анатомия

Для понимания анатомии входящих компонентов смотри примеры Хлебные крошки (Breadcrumbs), Кнопка (Button), Слот (Slot), Вкладки (Tabs), Разделитель (Divider).