Адаптивный дизайн

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

Система стилизации и управление адаптивностью

Radix UI не предоставляет встроенной CSS-системы, вместо этого компоненты можно интегрировать с любой CSS-библиотекой: Tailwind CSS, Stitches или vanilla-extract. Для адаптивного дизайна особенно важны медиа-запросы и динамическая стилизация через свойства.

Пример использования Stitches для адаптивного меню:

import { styled } from '@stitches/react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

const StyledContent = styled(DropdownMenu.Content, {
  backgroundColor: 'white',
  borderRadius: 6,
  padding: 10,
  boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
  
  '@media(max-width: 768px)': {
    width: '100%',
    padding: 8,
  },
});

Здесь медиа-запрос @media(max-width: 768px) позволяет компоненту DropdownMenu.Content изменять ширину и внутренние отступы на мобильных устройствах.

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

Для адаптивного дизайна важно правильно использовать контейнерные компоненты Radix UI, такие как Popover, Dialog и Tooltip. Они автоматически подстраиваются под положение и размеры экрана, но поведение можно дополнительно кастомизировать через свойства side, align и sideOffset.

Пример адаптивного Popover:

import * as Popover from '@radix-ui/react-popover';

<Popover.Root>
  <Popover.Trigger>Открыть</Popover.Trigger>
  <Popover.Content side="bottom" align="center" sideOffset={10}>
    Контент поповера
  </Popover.Content>
</Popover.Root>

Для мобильных устройств можно изменить поведение с помощью условной логики:

const isMobile = window.innerWidth < 768;

<Popover.Content
  side={isMobile ? 'top' : 'bottom'}
  align="center"
  sideOffset={isMobile ? 5 : 10}
>
  Контент поповера
</Popover.Content>

Скрытие и показ элементов

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

Пример с Accordion:

import * as Accordion from '@radix-ui/react-accordion';

<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>
        Заголовок
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content
      style={{
        display: window.innerWidth < 768 ? 'none' : 'block',
      }}
    >
      Контент
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Управление размером и позиционированием

Компоненты Radix UI поддерживают динамическое позиционирование и подстройку под размеры окна через свойства side, align, collisionPadding и avoidCollisions. Для адаптивного дизайна это позволяет:

  • Перемещать всплывающие элементы в зависимости от доступного пространства.
  • Автоматически избегать выхода за пределы экрана.
  • Настраивать смещения для разных устройств.

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

<Popover.Content collisionPadding={isMobile ? 8 : 16}>
  Контент
</Popover.Content>

Анимации и адаптивность

Radix UI поддерживает транзишны и анимации через CSS и keyframes. Для адаптивного дизайна важно использовать отдельные анимации для мобильных и десктопных версий, чтобы они выглядели естественно на разных устройствах.

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

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

const fadeIn = keyframes({
  '0%': { opacity: 0, transform: 'translateY(-10px)' },
  '100%': { opacity: 1, transform: 'translateY(0)' },
});

const AnimatedContent = styled(Popover.Content, {
  animation: `${fadeIn} 0.2s ease-out`,
  '@media(max-width: 768px)': {
    animation: 'none', // отключаем анимацию на мобильных для производительности
  },
});

Практики построения адаптивного интерфейса

  1. Использовать медиа-запросы и кастомные стили для управления размером и отступами.
  2. Подстраивать поведение контейнерных компонентов (Popover, Dialog) под размеры экрана.
  3. Контролировать видимость элементов через состояния и условные рендеры.
  4. Оптимизировать анимации для мобильных устройств.
  5. Использовать свойства collisionPadding и sideOffset для предотвращения выхода компонентов за пределы экрана.
  6. Комбинировать Radix UI с CSS-in-JS решениями, такими как Stitches или Tailwind, для гибкой адаптивной стилизации.

Примеры комбинаций компонентов

  • DropdownMenu + Accordion для компактного меню на мобильных.
  • Popover + динамическая подстройка side для контекстного меню на разных экранах.
  • Dialog + медиа-запросы для полноэкранного модального окна на смартфонах.

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

Оглавление