Responsive поведение

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

Медиа-запросы и использование стилей

Radix UI не навязывает конкретную систему стилей, что делает его совместимым с любыми CSS-решениями: vanilla CSS, CSS-in-JS, Tailwind или Stitches. Для управления responsive-поведением чаще всего применяются CSS медиа-запросы или системы токенов для breakpoints.

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

import { styled } from '@stitches/react';
import * as Dialog from '@radix-ui/react-dialog';

const ResponsiveDialogContent = styled(Dialog.Content, {
  width: '90vw',
  maxWidth: '500px',
  padding: '2rem',

  '@media(min-width: 768px)': {
    width: '70vw',
    maxWidth: '700px',
    padding: '3rem',
  },

  '@media(min-width: 1200px)': {
    width: '50vw',
    maxWidth: '900px',
    padding: '4rem',
  },
});

В данном примере компонент Dialog.Content адаптируется под разные размеры экранов, изменяя ширину и внутренние отступы. Ключевой принцип: компонент Radix остается неизменным, изменяется только его визуальное представление.

Управление поведением через props

Многие компоненты Radix UI поддерживают props, которые могут быть использованы для адаптации поведения:

  • side и align в Popover и Tooltip — позволяют задавать позицию элементов в зависимости от размера экрана. Например, для мобильных устройств всплывающие элементы могут располагаться снизу, а для десктопов — справа.
<Popover.Content side={isMobile ? 'bottom' : 'right'} align="start">
  Контент
</Popover.Content>
  • defaultOpen и open — позволяют управлять видимостью модальных окон и раскрывающихся панелей, что удобно при создании адаптивных интерфейсов, где некоторые элементы должны быть скрыты на маленьких экранах.

Использование адаптивных списков и навигации

Для компонентов вроде Tabs или NavigationMenu часто требуется переключение между горизонтальным и вертикальным расположением:

import * as Tabs from '@radix-ui/react-tabs';

<Tabs.Root defaultValue="tab1" orientation={isMobile ? 'vertical' : 'horizontal'}>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Первый</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Второй</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Контент первого таба</Tabs.Content>
  <Tabs.Content value="tab2">Контент второго таба</Tabs.Content>
</Tabs.Root>

Использование свойства orientation позволяет динамически менять расположение элементов без дублирования разметки.

Адаптивные анимации

Radix UI предоставляет API для анимации появления и скрытия компонентов, что также можно адаптировать под размеры экранов. Например, в компоненте Dialog можно изменять анимацию:

import { keyframes } from '@stitches/react';

const fadeIn = keyframes({
  '0%': { opacity: 0 },
  '100%': { opacity: 1 },
});

const slideUp = keyframes({
  '0%': { transform: 'translateY(20px)' },
  '100%': { transform: 'translateY(0)' },
});

const ResponsiveDialogContent = styled(Dialog.Content, {
  animation: `${fadeIn} 150ms ease-out`,
  
  '@media(min-width: 768px)': {
    animation: `${slideUp} 200ms ease-out`,
  },
});

Таким образом, мобильные устройства могут использовать легкие fade-анимации, а на десктопах можно применять более сложные эффекты с смещением и трансформациями.

Управление размерами с использованием Radix Primitives

Многие примитивные компоненты, такие как Slider, ScrollArea и Popover, поддерживают динамическое управление размерами через CSS или props. Это позволяет:

  • Уменьшать ширину ползунков и панелей на мобильных устройствах.
  • Автоматически менять направление скролла (horizontal / vertical) в зависимости от доступного пространства.
  • Контролировать размер popover’ов и tooltip’ов для предотвращения выхода за пределы экрана.

Принципы построения responsive-интерфейсов с Radix

  1. Семантика и доступность остаются неизменными. Все адаптации касаются только визуальной стороны и поведения, не нарушая работу клавиатуры и скринридеров.
  2. Компоненты остаются “primitives”, т.е. минимально стилизованными, что позволяет гибко интегрировать любую систему breakpoints.
  3. Сочетание CSS и props обеспечивает максимальную гибкость. Медиа-запросы решают визуальные задачи, props управляют поведением.
  4. Динамическое изменение orientation и positioning позволяет создавать интерфейсы, одинаково удобные на телефонах, планшетах и десктопах.

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

Оглавление