Декоративные элементы

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

К декоративным элементам относятся:

  • Separator
  • Aspect Ratio

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

Основные свойства декоративных компонентов Radix UI:

  • доступность (accessibility) — корректная семантика и ARIA-атрибуты;
  • гибкость стилизации — отсутствие навязанного дизайна;
  • минимальная логика — акцент на структуре и макете;
  • компонуемость — легкое сочетание с любыми UI-системами.

Separator

Назначение компонента

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

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

  • разделение пунктов меню;
  • отделение секций панели инструментов;
  • визуальное разделение блоков в карточках;
  • структурирование форм и настроек;
  • разделение элементов навигации.

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

Установка

Radix UI распространяется в виде независимых пакетов. Для использования Separator устанавливается отдельный модуль:

npm install @radix-ui/react-separator

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

Простейший пример горизонтального разделителя.

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

function Example() {
  return (
    <div>
      <div>Profile</div>

      <Separator.Root />

      <div>Settings</div>
    </div>
  );
}

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

  • рендерится как div
  • имеет роль separator
  • ориентирован горизонтально

Визуальный вид задаётся через CSS.

Стилизация разделителя

Radix UI не содержит встроенного дизайна. Визуальные свойства задаются самостоятельно.

.Separator {
  background-color: #e5e7eb;
}

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

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

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

<Separator.Root className="Separator" />

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

data-orientation

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

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

Для вертикального разделения используется свойство orientation.

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

Пример панели инструментов:

function Toolbar() {
  return (
    <div className="Toolbar">
      <button>Undo</button>
      <button>Redo</button>

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

      <button>Bold</button>
      <button>Italic</button>
    </div>
  );
}

CSS:

.Toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

Декоративный режим

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

Для таких случаев предусмотрено свойство:

decorative
<Separator.Root decorative className="Separator" />

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

  • удаляется роль separator
  • элемент игнорируется экранными читалками

Это важно для предотвращения избыточной информации в accessibility-дереве.

Использование в сложных интерфейсах

Separator часто применяется в комбинации с другими компонентами Radix UI.

Меню

<DropdownMenu.Content>

  <DropdownMenu.Item>
    Profile
  </DropdownMenu.Item>

  <Separator.Root className="Separator" />

  <DropdownMenu.Item>
    Logout
  </DropdownMenu.Item>

</DropdownMenu.Content>

Настройки

<section>
  <h3>Account</h3>

  <AccountSettings />

  <Separator.Root className="Separator" />

  <h3>Security</h3>

  <SecuritySettings />
</section>

Преимущества использования Separator

1. Семантическая корректность

Экранные читалки распознают элемент как разделитель.

2. Управление ориентацией

Горизонтальное и вертикальное использование.

3. Минимальный DOM

Компонент рендерит простой элемент без лишних обёрток.

4. Универсальная стилизация

Все визуальные свойства контролируются разработчиком.

Aspect Ratio

Назначение компонента

Aspect Ratio — компонент для сохранения фиксированного соотношения сторон элемента.

Он решает распространённую проблему адаптивной верстки: необходимость поддерживать пропорции изображений, видео и медиа-контента.

Типичные случаи применения:

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

Установка

npm install @radix-ui/react-aspect-ratio

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

import * as AspectRatio from "@radix-ui/react-aspect-ratio";

function Example() {
  return (
    <AspectRatio.Root ratio={16 / 9}>
      <img src="/image.jpg" alt="Preview" />
    </AspectRatio.Root>
  );
}

Компонент гарантирует, что контейнер всегда сохраняет пропорции 16:9, независимо от ширины.

Принцип работы

Aspect Ratio использует известную технику CSS:

padding-bottom hack

Контейнер вычисляет высоту на основе ширины и заданного коэффициента.

Формула:

height = width / ratio

Таким образом:

Соотношение Значение ratio
16:9 16/9
4:3 4/3
1:1 1
3:2 3/2

Карточка изображения

Пример карточки с адаптивным изображением.

function Card() {
  return (
    <div className="Card">

      <AspectRatio.Root ratio={16 / 9}>
        <img
          src="/cover.jpg"
          alt="Cover"
          className="CardImage"
        />
      </AspectRatio.Root>

      <div className="CardContent">
        Article title
      </div>

    </div>
  );
}

CSS:

.CardImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Использование object-fit позволяет изображению корректно заполнять контейнер.

Видео контейнер

Aspect Ratio часто используется для встраивания видео.

<AspectRatio.Root ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/example"
    title="Video"
    allowFullScreen
  />
</AspectRatio.Root>

Это обеспечивает корректную адаптивность без сложных CSS-расчётов.

Галерея изображений

function GalleryItem({ src }) {
  return (
    <AspectRatio.Root ratio={1}>
      <img src={src} alt="" />
    </AspectRatio.Root>
  );
}

Использование ratio={1} создаёт идеальные квадратные элементы, что часто используется в сетках галерей.

Сетка карточек

function Grid() {
  return (
    <div className="Grid">

      <Card />
      <Card />
      <Card />

    </div>
  );
}

CSS:

.Grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Aspect Ratio гарантирует одинаковую высоту карточек.

Вложенные элементы

Внутри Aspect Ratio можно размещать любые элементы:

  • изображения
  • видео
  • canvas
  • WebGL сцены
  • карты
  • iframe

Пример:

<AspectRatio.Root ratio={4 / 3}>
  <canvas />
</AspectRatio.Root>

Управление стилями

Компонент принимает className.

<AspectRatio.Root
  ratio={16 / 9}
  className="VideoContainer"
>
  <video />
</AspectRatio.Root>

CSS:

.VideoContainer {
  border-radius: 8px;
  overflow: hidden;
}

Адаптивные изображения

Aspect Ratio помогает избежать layout shift — скачков макета при загрузке изображений.

Без фиксированных пропорций браузер не знает будущую высоту изображения, что вызывает перерасчет layout.

Использование Aspect Ratio решает проблему:

  • контейнер занимает место заранее
  • изображение загружается без изменения структуры страницы

Это улучшает показатели Core Web Vitals.

Сравнение с CSS aspect-ratio

Современный CSS содержит свойство:

aspect-ratio

Пример:

.container {
  aspect-ratio: 16 / 9;
}

Однако Radix Aspect Ratio имеет преимущества:

1. Совместимость

Работает в старых браузерах без поддержки aspect-ratio.

2. Консистентность

Одинаковое поведение во всех проектах.

3. Компонентная архитектура

Удобная интеграция с React.

Применение в дизайн-системах

Aspect Ratio часто используется внутри:

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

Separator, в свою очередь, применяется в:

  • навигационных панелях
  • выпадающих меню
  • панелях инструментов
  • модальных окнах
  • страницах настроек

Эти небольшие декоративные компоненты обеспечивают структурную целостность интерфейса и являются фундаментальными строительными блоками для сложных UI-систем.

Оглавление