Работа с data-атрибутами

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

Основные принципы использования data-атрибутов

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

Например, в компоненте Dialog состояние открытия отслеживается через атрибут data-state:

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>Открыть диалог</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Заголовок</Dialog.Title>
    <Dialog.Description>Описание диалога</Dialog.Description>
    <Dialog.Close>Закрыть</Dialog.Close>
  </Dialog.Content>
</Dialog.Root>

При открытии диалогового окна, Radix UI автоматически добавляет атрибут data-state="open" к элементу Dialog.Content. Когда окно закрыто, атрибут меняется на data-state="closed".

Использование data-атрибутов для стилизации

Одним из ключевых преимуществ data-атрибутов является возможность точно управлять стилями через CSS без написания JS-кода.

Пример с диалоговым окном и анимацией появления:

[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-state="closed"] {
  opacity: 0;
  transform: translateY(-10px);
}

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

Применение в интерактивных компонентах

Data-атрибуты используются во всех интерактивных компонентах Radix UI:

  1. Toggle (Switch) Атрибут data-state="checked" показывает активное состояние переключателя:
<Switch.Root>
  <Switch.Thumb />
</Switch.Root>

CSS:

[data-state="checked"] {
  background-color: green;
}
[data-state="unchecked"] {
  background-color: gray;
}
  1. Tabs Активная вкладка получает data-state="active", а неактивные — data-state="inactive".
[data-state="active"] {
  font-weight: bold;
  border-bottom: 2px solid black;
}
  1. Collapsible / Accordion Для элементов аккордеона используется data-state="open" и data-state="closed", что позволяет анимировать раскрытие содержимого:
[data-state="open"] {
  max-height: 500px;
  transition: max-height 0.5s ease;
}
[data-state="closed"] {
  max-height: 0;
  overflow: hidden;
}

Использование кастомных data-атрибутов

Radix UI поддерживает и пользовательские data-атрибуты, которые можно использовать для передачи дополнительной информации между компонентами или для настройки поведения:

<Dialog.Content data-size="large">
  ...
</Dialog.Content>

CSS для настройки размера:

[data-size="large"] {
  width: 600px;
}
[data-size="small"] {
  width: 300px;
}

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

Доступность и data-атрибуты

Data-атрибуты в Radix UI тесно связаны с принципами доступности:

  • Атрибут data-state отражает текущее состояние элемента для визуальной стилизации и анимации.
  • Для пользователей экранных читалок используются стандартные aria-* атрибуты, а data-атрибуты остаются внутренними средствами управления визуальным состоянием.

Таким образом, использование data-атрибутов позволяет разделять визуальные эффекты и семантическую доступность, что повышает качество интерфейса.

Советы по организации CSS с data-атрибутами

  1. Группировка по состояниям Вынести все состояния в отдельные блоки CSS для читаемости:
/* Диалоговое окно */
[data-state="open"] { ... }
[data-state="closed"] { ... }

/* Переключатель */
[data-state="checked"] { ... }
[data-state="unchecked"] { ... }

  1. Использование кастомных атрибутов для вариаций Позволяет поддерживать один компонент с множеством вариантов без дублирования кода.

  2. Комбинация с CSS-переменными Можно изменять цвет, размер и анимацию через CSS-переменные на основе data-атрибутов, создавая динамичные интерфейсы без JS.

Использование data-атрибутов в Radix UI обеспечивает чистую, управляемую и доступную архитектуру интерфейсов, позволяя полностью сосредоточиться на логике и стилизации компонентов, избегая лишней зависимости от состояния в JavaScript.

Оглавление