Дизайн в БАРС Груп

Определение

Drawer (Выдвижная панель) — это панель, выдвигающаяся с одного из края экрана. Компонент содержит набор информации или действий. Поскольку пользователь может взаимодействовать с информацией на панели, не покидая текущую страницу, задачи могут выполняться более эффективно в том же контексте.

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

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

При открытии панели весь фон страницы затемняется с помощью компонента (Overlay) — (вставляется отдельно поверх страницы).
Это помогает сосредоточить внимание пользователя на панели и предотвратить взаимодействие с остальной частью страницы, пока работа в панели не завершена.

Панель не закрывается при щелчке вне её области. Это сделано для предотвращения случайной потери данных пользователя.

Закрыть панель можно несколькими способами:

Нажатием кнопки закрытия в Шапк е окна (Modal header) или кнопки «Отмена» на Панели инструментов (Toolbar).
Использованием клавиши ESC.
Нажатием на основное действие, например, «Сохранить».

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

При закрытии панели, закрываются все уровни панели.

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

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

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

Состоит из компонентов: Шапка окна (Modal header), Слот (Slot) и Панель инструментов (Toolbar)

Панели, открывающиеся справа и слева, имеют фиксированные размеры по ширине:

S — ширина 320px, высота растягивается на всю высоту экрана.
M — ширина 560px, высота растягивается на всю высоту экрана.
L — ширина 920px, высота растягивается на всю высоту экрана.
XL — ширина 1200px, высота растягивается на всю высоту экрана.

Для панелей, открывающихся сверху и снизу, доступны следующие варианты размеров:

Fill — ширина и высота фиксируются на всю ширину экрана. Панель занимает весь экран по горизонтали и вертикали, обеспечивая максимальное пространство для контента.

Hug — ширина фиксируется на всю ширину экрана, а высота растягивается в зависимости от содержимого. Панель будет адаптироваться по высоте в зависимости от объёма контента, оставаясь на всю ширину экрана.

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

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

Текст

Текст заголовка должен быть кратким (2-4 слова и не более одной строки) и описывать информацию или действие, которое представляет панель.

Варианты

Справа

Панель, выдвигающаяся с правой стороны экрана

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

Когда открывается новая панель поверх текущей, часть предыдущей панели остаётся видимой под ней.

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

Если первый уровень панели был размером L, а затем пользователь открыл второй уровень панели размером S, визуально отображается только панель размера S. Это значит, что панели не накладываются друг на друга, и предыдущая панель скрывается, пока активна текущая.

Слева

Панель, выдвигающаяся с левой стороны экрана.

Поведение панелей аналогично панели, которая открывается «Справа». Независимо от того, с какой стороны они появляются, все панели следуют той же логике: предыдущие панели остаются частично видимыми, а пользователь может вернуться к ним по мере закрытия текущих.

Снизу

Панель, выдвигающаяся с нижней части экрана.

При открытии панели снизу, компонент может использоваться в двух вариантах:

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

Если в панели есть уровни вложенности, предыдущие окна также остаются частично видимыми, даже в полноэкранном режиме с отступом в 40px сверху. Это помогает пользователю понимать, что он находится в многослойной структуре, и легко возвращаться к предыдущим шагам, закрывая текущие панели.

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

При этом высота панели также ограничивается высотой экрана с отступом в 40px.

Сверху

Панель, выдвигающаяся с верхней стороны экрана.

Поведение панелей аналогично панели, которая открывается «Снизу». Независимо от того, с какой стороны они появляются, все панели следуют той же логике: предыдущие панели остаются частично видимыми, а пользователь может вернуться к ним по мере закрытия текущих.

Скролл

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

При этом Панель инструментов (Toolbar) остаётся фиксированной и располагается поверх контентной области, даже при прокрутке. Это обеспечивает постоянный доступ к инструментам и действиям, не мешая просмотру всего содержимого панели.

Панель инструментов (Toolbar) в режиме просмотра

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