Горизонтальные и вертикальные разделители

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

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

Разделитель не содержит бизнес-логики и не влияет на структуру данных приложения. Его задача — формировать визуальные границы между логическими блоками.

Основные области применения:

  • разделение пунктов меню
  • отделение групп настроек
  • визуальное разделение панелей интерфейса
  • структурирование форм
  • оформление карточек и списков

Компонент Separator в Radix UI

Библиотека Radix UI предоставляет компонент:

@radix-ui/react-separator

Он реализует:

  • корректную семантику
  • поддержку доступности (ARIA)
  • управление ориентацией
  • декоративные и семантические режимы

Базовый импорт:

import * as Separator from "@radix-ui/react-separator";

Основной элемент:

<Separator.Root />

Этот элемент рендерит разделитель и принимает несколько параметров, позволяющих управлять его поведением.

Базовое использование

Минимальный пример горизонтального разделителя:

import * as Separator from "@radix-ui/react-separator";

export default function Example() {
  return (
    <div>
      <p>Раздел 1</p>

      <Separator.Root />

      <p>Раздел 2</p>
    </div>
  );
}

По умолчанию компонент имеет:

  • горизонтальную ориентацию
  • роль separator
  • стандартную ARIA-разметку

Однако внешний вид полностью зависит от CSS.

Пример стилизации:

.separator {
  background-color: #e5e5e5;
  height: 1px;
  width: 100%;
}

Использование:

<Separator.Root className="separator" />

Горизонтальные разделители

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

Типичные сценарии:

  • разделение секций страницы
  • отделение пунктов меню
  • визуальное разграничение карточек

Пример

<div className="container">
  <div>Профиль</div>

  <Separator.Root className="separator" />

  <div>Настройки</div>

  <Separator.Root className="separator" />

  <div>Выход</div>
</div>

CSS:

.separator {
  height: 1px;
  width: 100%;
  background: #ddd;
  margin: 12px 0;
}

В результате элементы списка визуально делятся на отдельные блоки.

Вертикальные разделители

Вертикальные разделители используются внутри горизонтальных интерфейсов:

  • навигационных панелей
  • тулбаров
  • списков действий
  • панелей управления

Для этого используется параметр orientation.

Пример

<Separator.Root orientation="vertical" />

Полный пример:

<div className="toolbar">
  <button>Копировать</button>

  <Separator.Root
    orientation="vertical"
    className="separatorVertical"
  />

  <button>Вставить</button>

  <Separator.Root
    orientation="vertical"
    className="separatorVertical"
  />

  <button>Удалить</button>
</div>

CSS:

.toolbar {
  display: flex;
  align-items: center;
}

.separatorVertical {
  width: 1px;
  height: 20px;
  background: #ddd;
  margin: 0 8px;
}

Вертикальный разделитель становится частью горизонтальной компоновки элементов.

Свойство orientation

Параметр orientation управляет направлением разделителя.

Поддерживаемые значения:

Значение Описание
horizontal горизонтальный разделитель
vertical вертикальный разделитель

По умолчанию:

horizontal

Пример:

<Separator.Root orientation="vertical" />

Radix автоматически добавляет атрибут:

data-orientation="vertical"

Это позволяет удобно применять CSS-стили.

Пример:

[data-orientation="horizontal"] {
  height: 1px;
  width: 100%;
}

[data-orientation="vertical"] {
  width: 1px;
  height: 100%;
}

Декоративные разделители

Иногда разделитель используется исключительно для визуального оформления и не должен участвовать в навигации экранных читалок.

Для этого применяется свойство:

decorative

Пример:

<Separator.Root decorative />

В этом режиме:

  • элемент получает aria-hidden="true"
  • роль separator не используется

Это особенно важно в интерфейсах с большим количеством декоративных линий.

Разделители внутри меню

Radix UI активно использует разделители внутри меню и выпадающих списков.

Пример структуры меню:

<div className="menu">
  <div className="item">Новый файл</div>
  <div className="item">Открыть</div>

  <Separator.Root className="separator" />

  <div className="item">Сохранить</div>
  <div className="item">Сохранить как</div>
</div>

Разделитель отделяет логические группы команд.

CSS:

.separator {
  height: 1px;
  background: #eee;
  margin: 6px 0;
}

Использование в панелях инструментов

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

Пример:

<div className="toolbar">
  <button>B</button>
  <button>I</button>
  <button>U</button>

  <Separator.Root
    orientation="vertical"
    className="separatorVertical"
  />

  <button>Список</button>
  <button>Цитата</button>
</div>

Разделитель помогает пользователю быстрее ориентироваться в панели.

Адаптивные разделители

Разделители могут менять ориентацию в зависимости от размера экрана.

Например:

  • вертикальный на десктопе
  • горизонтальный на мобильных устройствах

Пример:

<Separator.Root
  orientation={isMobile ? "horizontal" : "vertical"}
  className="separator"
/>

CSS:

.separator {
  background: #ddd;
}

[data-orientation="horizontal"] {
  height: 1px;
  width: 100%;
}

[data-orientation="vertical"] {
  width: 1px;
  height: 24px;
}

Использование с Flexbox

Разделители часто используются внутри flex-контейнеров.

Пример вертикального разделителя:

<div className="layout">
  <aside>Навигация</aside>

  <Separator.Root
    orientation="vertical"
    className="divider"
  />

  <main>Контент</main>
</div>

CSS:

.layout {
  display: flex;
}

.divider {
  width: 1px;
  background: #e5e5e5;
}

Такой подход позволяет разделять крупные части интерфейса.

Использование с Grid

Разделители также могут применяться внутри grid-систем.

Пример:

<div className="grid">
  <div>Колонка 1</div>

  <Separator.Root
    orientation="vertical"
    className="separatorVertical"
  />

  <div>Колонка 2</div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.separatorVertical {
  width: 1px;
  background: #ddd;
}

Разделитель занимает отдельную колонку сетки.

Расширенная стилизация

Separator поддерживает любые CSS-стили.

Пунктирные разделители

.separator {
  border-top: 1px dashed #ccc;
}

Градиентные разделители

.separator {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #ddd,
    transparent
  );
}

Толстые разделители

.separator {
  height: 4px;
  background: #333;
}

Анимация разделителей

Разделители могут участвовать в анимациях интерфейса.

Пример появления:

.separator {
  height: 1px;
  background: #ddd;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.container:hover .separator {
  transform: scaleX(1);
}

Применение внутри карточек

Карточки интерфейса часто содержат несколько блоков информации.

Пример:

<div className="card">
  <div className="header">Профиль</div>

  <Separator.Root className="separator" />

  <div className="content">
    Информация о пользователе
  </div>

  <Separator.Root className="separator" />

  <div className="footer">
    Действия
  </div>
</div>

CSS:

.separator {
  height: 1px;
  background: #f0f0f0;
  margin: 10px 0;
}

Атрибуты данных Radix

Separator автоматически добавляет служебные атрибуты:

data-orientation="horizontal"
data-orientation="vertical"

Это облегчает стилизацию без дополнительной логики.

Пример:

[data-orientation="horizontal"] {
  margin: 16px 0;
}

[data-orientation="vertical"] {
  margin: 0 16px;
}

Практические рекомендации

Использование разделителей должно быть умеренным.

Хорошие практики:

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

Плохие практики:

  • использовать разделители вместо правильной компоновки
  • перегружать интерфейс линиями
  • применять вертикальные разделители без flex/grid

Типичная архитектура компонентов

В крупных проектах часто создаётся собственный компонент-обёртка.

Пример:

import * as Separator from "@radix-ui/react-separator";

export function Divider(props) {
  return (
    <Separator.Root
      className="divider"
      {...props}
    />
  );
}

Использование:

<Divider />

<Divider orientation="vertical" />

Это позволяет централизовать стили и настройки.

Интеграция с дизайн-системой

Separator хорошо вписывается в дизайн-системы благодаря:

  • минимальной логике
  • управлению через CSS
  • поддержке ориентации
  • семантической доступности

Типичная токенизация:

.separator {
  background: var(--border-color);
}

или

.separator {
  background: var(--divider-color);
}

Это позволяет менять тему интерфейса без изменения компонентов.

Архитектурная роль разделителей

Разделители являются частью визуальной иерархии интерфейса. Они помогают:

  • структурировать информацию
  • уменьшить когнитивную нагрузку
  • улучшить читаемость
  • выделить функциональные группы

Компонент Separator из Radix UI обеспечивает правильную реализацию этого паттерна, сочетая доступность, гибкость и минимальную абстракцию.

Оглавление