Ориентация списка

Radix UI предоставляет компоненты с высокой степенью кастомизации и поддержкой доступности (accessibility), среди которых особенно важны компоненты Dropdown Menu, Select, RadioGroup и CheckboxGroup, где ориентация элементов списка играет ключевую роль для пользовательского взаимодействия и UX. Ориентация списка определяет, как элементы будут располагаться: вертикально или горизонтально, а также влияет на навигацию с клавиатуры и взаимодействие с экранными считывателями.

Вертикальная и горизонтальная ориентация

Компоненты Radix UI используют проп orientation, который принимает два значения:

orientation="vertical" // стандартное вертикальное расположение
orientation="horizontal" // элементы располагаются в ряд
  • Вертикальная ориентация чаще используется для меню, выпадающих списков и боковых панелей. Она обеспечивает привычный поток навигации сверху вниз и оптимальна для списков с большим количеством элементов.
  • Горизонтальная ориентация удобна для табов, кнопочных групп и горизонтальных навигационных меню. Она требует отдельной настройки клавиатурной навигации, так как стрелки работают по горизонтали.

Пример использования в компоненте DropdownMenu:

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Меню</DropdownMenu.Trigger>
  <DropdownMenu.Content orientation="vertical">
    <DropdownMenu.Item>Элемент 1</DropdownMenu.Item>
    <DropdownMenu.Item>Элемент 2</DropdownMenu.Item>
    <DropdownMenu.Item>Элемент 3</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Настройка навигации с клавиатуры

Radix UI автоматически обрабатывает клавиатурные события для компонентов с ориентацией:

  • В вертикальной ориентации используются клавиши ArrowUp и ArrowDown для перемещения между элементами списка.
  • В горизонтальной ориентации навигация происходит через ArrowLeft и ArrowRight.
  • Home и End всегда перемещают фокус на первый и последний элемент списка соответственно, независимо от ориентации.
  • Для элементов типа Select или RadioGroup ориентация влияет на то, как стрелочные клавиши переключают выбор.

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

import * as RadioGroup from '@radix-ui/react-radio-group';

<RadioGroup.Root orientation="horizontal" defaultValue="option1">
  <RadioGroup.Item value="option1">Вариант 1</RadioGroup.Item>
  <RadioGroup.Item value="option2">Вариант 2</RadioGroup.Item>
  <RadioGroup.Item value="option3">Вариант 3</RadioGroup.Item>
</RadioGroup.Root>

Влияние на доступность (ARIA)

Каждому компоненту с ориентацией автоматически присваиваются корректные ARIA-атрибуты:

  • role="menu" и aria-orientation="vertical" для вертикальных меню.
  • role="toolbar" и aria-orientation="horizontal" для горизонтальных групп кнопок.
  • В RadioGroup или CheckboxGroup атрибут aria-orientation помогает экранным считывателям правильно объявлять направление элементов списка.

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

Стилизация и кастомная ориентация

Radix UI оставляет стилизацию полностью на разработчика. Ориентация часто сочетается с Flexbox или CSS Grid, чтобы визуально подчеркнуть выбранный поток элементов.

Пример вертикальной и горизонтальной стилизации через Flexbox:

.vertical-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.horizontal-list {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
<DropdownMenu.Content className="vertical-list">
  <DropdownMenu.Item>Элемент 1</DropdownMenu.Item>
  <DropdownMenu.Item>Элемент 2</DropdownMenu.Item>
</DropdownMenu.Content>

<RadioGroup.Root className="horizontal-list">
  <RadioGroup.Item value="a">A</RadioGroup.Item>
  <RadioGroup.Item value="b">B</RadioGroup.Item>
</RadioGroup.Root>

Динамическое изменение ориентации

Radix UI позволяет менять ориентацию на лету, используя состояние React:

const [orientation, setOrientation] = React.useState('vertical');

<DropdownMenu.Content orientation={orientation}>
  <DropdownMenu.Item>Элемент 1</DropdownMenu.Item>
  <DropdownMenu.Item>Элемент 2</DropdownMenu.Item>
</DropdownMenu.Content>

<button onCl ick={() => setOrientation('horizontal')}>Сделать горизонтальным</button>

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

Советы по UX

  • Вертикальные списки удобны для длинных меню с множеством элементов.
  • Горизонтальные группы лучше подходят для табов и коротких наборов опций.
  • Обеспечивать одинаковый gap между элементами для чистой визуальной структуры.
  • Всегда указывать ориентацию явно для компонентов, участвующих в доступности.

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

Оглавление