Сохранение пропорций элементов

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

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

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

import * as Tooltip from '@radix-ui/react-tooltip';

function ProportionalTooltip() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger style={{ width: '50%', aspectRatio: '16/9' }}>
        Наведи курсор
      </Tooltip.Trigger>
      <Tooltip.Content>
        Это содержимое тултипа с сохранением пропорций
      </Tooltip.Content>
    </Tooltip.Root>
  );
}
  • width: '50%' задаёт ширину относительно родителя.
  • aspectRatio: '16/9' гарантирует, что высота автоматически подстроится под ширину, сохраняя пропорции.

Использование aspect-ratio является современным и простым способом контроля пропорций, поддерживаемым в большинстве браузеров.

Комбинирование Radix UI с CSS Grid и Flexbox

Для динамических интерфейсов часто используют CSS Grid или Flexbox:

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
  <Tooltip.Root>
    <Tooltip.Trigger style={{ aspectRatio: '1/1' }}>Кнопка 1</Tooltip.Trigger>
    <Tooltip.Content>Содержимое 1</Tooltip.Content>
  </Tooltip.Root>
  <Tooltip.Root>
    <Tooltip.Trigger style={{ aspectRatio: '1/1' }}>Кнопка 2</Tooltip.Trigger>
    <Tooltip.Content>Содержимое 2</Tooltip.Content>
  </Tooltip.Root>
</div>
  • Каждый элемент автоматически занимает одинаковое пространство благодаря 1fr.
  • aspectRatio: '1/1' обеспечивает квадратную форму независимо от ширины колонки.

Такой подход подходит для сеток кнопок, карточек и других интерактивных элементов Radix UI.

Динамическое управление пропорциями через JavaScript

В некоторых случаях требуется менять пропорции элементов программно. Radix UI совместим с управляемыми состояниями:

import { useState } from 'react';

function ResizableCard() {
  const [width, setWidth] = useState(200);
  const height = width * 0.75; // соотношение 4:3

  return (
    <div style={{ width, height, background: '#e0e0e0' }}>
      <input
        type="range"
        min="100"
        max="500"
        value={width}
        onCha nge={(e) => setWidth(parseInt(e.target.value))}
      />
      Контент с фиксированным соотношением
    </div>
  );
}
  • Пропорции задаются через вычисление высоты на основе ширины.
  • Этот метод особенно полезен для сложных компонентов вроде Dialog или Popover, где размеры контента должны подстраиваться под доступное пространство.

Сохранение пропорций при масштабировании модальных окон

Radix UI предоставляет Dialog и Popover с полной контролируемостью размеров:

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

function ProportionalDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Открыть диалог</Dialog.Trigger>
      <Dialog.Content style={{ width: '80%', maxWidth: '600px', aspectRatio: '16/9' }}>
        Контент диалога с сохранением пропорций
      </Dialog.Content>
    </Dialog.Root>
  );
}
  • maxWidth ограничивает расширение диалога.
  • aspectRatio поддерживает визуальную гармонию независимо от ширины экрана.

Взаимодействие с медиазапросами

Для адаптивного дизайна Radix UI полностью совместим с медиазапросами CSS:

@media (max-width: 768px) {
  .tooltip-trigger {
    width: 100%;
    aspect-ratio: 4/3;
  }
}

@media (min-width: 769px) {
  .tooltip-trigger {
    width: 50%;
    aspect-ratio: 16/9;
  }
}
  • Медиазапросы позволяют менять пропорции и размеры элементов в зависимости от устройства.
  • Это особенно актуально для мобильных интерфейсов с компонентами Radix UI.

Итоговые рекомендации по сохранению пропорций

  • Использовать CSS aspect-ratio для простого сохранения пропорций.
  • Комбинировать Radix UI с Grid или Flexbox для динамических сеток.
  • Управлять размерами через состояние JavaScript, если требуется сложная логика.
  • Ограничивать максимальные размеры с maxWidth и maxHeight для модальных компонентов.
  • Использовать медиазапросы для адаптивного изменения пропорций на разных устройствах.

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

Оглавление