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

Определение

Divider (Разделитель) — это компонент, который используется для визуального разделения контента. Его основная цель — улучшить восприятие структуры страницы, отделяя логически связанные элементы или блоки информации.

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

Выполняет несколько важных функций в интерфейсе, улучшая его восприятие
и навигацию:

Разделяет контент на логические блоки, помогая пользователям легко воспринимать
и структурировать информацию
Улучшает читаемость больших объемов данных, добавляя визуальные маркеры между разными элементами
Используется для создания более упорядоченного и эстетичного внешнего вида, отделяя заголовки, списки или действия друг от друга
В некоторых случаях может разделять элементы, чтобы они выглядели более интерактивными или независимыми друг от друга, например, при создании динамических карточек или действий

Используется в таких компонентах, как Панель инструментов (Toolbar), Шапка окна (Modal header) и Скролл (Scroll), чтобы улучшить визуальную структуру и организацию контента.

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

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

Имеет два варианта отображения — Solid (сплошной) и Dash (пунктирный), которые выбираются в зависимости от контекста использования:

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

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

Можно использовать как в горизонтальной, так и в вертикальной ориентации,
в зависимости от позиции и структуры контента.