Arrow_down_24.svgchevron-right-s-16icon-bars1-72icon-bars10-72icon-bars11-72icon-bars12-72icon-bars13-72icon-bars2-72icon-bars3-72icon-bars4-72icon-bars5-72icon-bars6-72icon-bars7-72icon-bars8-72icon-bars9-72storybook-16-solid

Определение

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

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

Даёт пользователю доступ к действиям или опциям, которые актуальны в конкретной ситуации.

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

Компонент Слот (Slot) внутри позволяет пользователю настроить элемент под конкретные задачи. Например, можно добавить кнопки для создания или удаления объекта.

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

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

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

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

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

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

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

Варианты

Без разделителя

Разделитель сверху

Разделитель снизу

Разделитель справа

Разделитель слева

Параметры

Анатомия

Для понимания анатомии входящих компонентов смотри примеры Разделитель (Divider), Слот (Slot)