Item, ItemText, ItemIndicator

Radix UI предоставляет мощные примитивы для создания высококачественных интерфейсов с доступностью «из коробки». Среди ключевых компонентов для построения меню, списков и селекторов выделяются Item, ItemText и ItemIndicator. Эти компоненты работают совместно, обеспечивая консистентное взаимодействие пользователя с элементами интерфейса.

Item

Item представляет собой базовый интерактивный элемент внутри компонентов, таких как DropdownMenu, Select или Toolbar. Он обеспечивает правильное управление фокусом, обработку клавиатурных событий и интеграцию с системой доступности.

Основные свойства Item:

  • disabled: делает элемент неактивным. Пользователь не может выбрать такой элемент, а он визуально выглядит заблокированным.
  • value: используется внутри компонентов вроде Select, где необходимо определить уникальное значение элемента.
  • onSelect: функция обратного вызова, вызываемая при выборе элемента.
  • className: возможность добавлять кастомные CSS-классы для стилизации.

Пример использования Item в Select:

import * as Sel ect fr om '@radix-ui/react-select';

<Select.Root>
  <Select.Trigger>Выберите вариант</Select.Trigger>
  <Select.Content>
    <Select.Item value="apple">
      <Select.ItemText>Яблоко</Select.ItemText>
    </Select.Item>
    <Select.Item value="orange" disabled>
      <Select.ItemText>Апельсин</Select.ItemText>
    </Select.Item>
    <Select.Item value="banana">
      <Select.ItemText>Банан</Select.ItemText>
    </Select.Item>
  </Select.Content>
</Select.Root>

В этом примере элемент Апельсин неактивен благодаря свойству disabled. Item автоматически управляет состоянием фокуса и клавиатурной навигацией.

ItemText

ItemText служит для отображения текста внутри Item. Он отделяет контент элемента от логики, что позволяет легко управлять стилями и обеспечивать семантическую структуру.

Особенности ItemText:

  • Не несет интерактивного поведения.
  • Поддерживает кастомизацию через className.
  • Может использоваться совместно с ItemIndicator для визуального отображения состояния выбора.

Пример:

<Select.Item value="grape">
  <Select.ItemText>Виноград</Select.ItemText>
</Select.Item>

Использование ItemText гарантирует единообразное отображение текста, даже если элементы содержат сложные вложенные компоненты.

ItemIndicator

ItemIndicator отвечает за визуальную индикацию состояния элемента, например, выбран ли элемент в Select или отмечен ли пункт в DropdownMenu.

Основные моменты:

  • Размещается внутри Item и отображается только в соответствующих состояниях.
  • Обычно используется для рендеринга иконок, галочек или других визуальных маркеров.
  • Совместим с CSS-анимациями и стилями состояния.

Пример:

<Select.Item value="kiwi">
  <Select.ItemIndicator>
    <CheckIcon />
  </Select.ItemIndicator>
  <Select.ItemText>Киви</Select.ItemText>
</Select.Item>

В этом примере CheckIcon появляется только когда элемент выбран. ItemIndicator автоматически синхронизируется со состоянием Item, что исключает необходимость ручного управления отображением индикаторов.

Совместное использование Item, ItemText и ItemIndicator

Эти три компонента создают единую архитектуру для интерактивных списков и меню:

  1. Item обеспечивает доступность и интерактивность.
  2. ItemText отделяет визуальный контент от логики.
  3. ItemIndicator отображает текущее состояние элемента.

Пример полной структуры:

<Select.Root>
  <Select.Trigger>Выберите фрукт</Select.Trigger>
  <Select.Content>
    <Select.Item value="apple">
      <Select.ItemIndicator>
        <CheckIcon />
      </Select.ItemIndicator>
      <Select.ItemText>Яблоко</Select.ItemText>
    </Select.Item>
    <Select.Item value="banana">
      <Select.ItemIndicator>
        <CheckIcon />
      </Select.ItemIndicator>
      <Select.ItemText>Банан</Select.ItemText>
    </Select.Item>
  </Select.Content>
</Select.Root>

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

Рекомендации по стилизации

  • Использовать className или CSS-модули для кастомной стилизации элементов.
  • Для ItemIndicator предпочтительно использовать иконки или небольшие визуальные метки, чтобы не перегружать интерфейс.
  • В ItemText можно применять текстовые утилиты (обрезка текста, перенос строк), не нарушая доступность компонента.

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

Оглавление