Работа с изображениями

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

Компонент Avatar

Avatar используется для отображения изображений пользователей или иконок с возможностью кастомизации размеров, форм и fallback-элементов. Основные свойства:

  • src – путь к изображению.
  • alt – альтернативный текст для доступности.
  • fallback – элемент, отображающийся при ошибке загрузки изображения.
  • size – размеры аватара (xs, sm, md, lg, xl).

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

import * as Avatar from '@radix-ui/react-avatar';

<Avatar.Root>
  <Avatar.Image src="/user.png" alt="User avatar" />
  <Avatar.Fallback>U</Avatar.Fallback>
</Avatar.Root>

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

  • Автоматическая поддержка fallback-символа при проблемах с загрузкой.
  • Контроль размера через CSS-переменные (--radix-avatar-size).
  • Возможность стилизации через стилизованные компоненты или Tailwind CSS.

Компонент Dialog для просмотра изображений

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

Пример реализации модального просмотра изображения:

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

<Dialog.Root>
  <Dialog.Trigger asChild>
    <img src="/thumbnail.png" alt="Thumbnail" className="cursor-pointer" />
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="fixed inset-0 flex items-center justify-center">
      <img src="/fullsize.png" alt="Full size" />
      <Dialog.Close className="absolute top-4 right-4">X</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Ключевые моменты:

  • Dialog.Trigger может быть любым элементом, включая <img>.
  • Dialog.Content можно адаптировать под масштабируемые изображения, галереи или слайдеры.
  • Dialog.Overlay обеспечивает затемнение фона и улучшает визуальное восприятие.

Использование Tooltip для изображений

Tooltip позволяет показывать текстовую подсказку при наведении на изображение. Важно учитывать доступность: текст в tooltip должен быть понятен и краток.

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

<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <img src="/icon.png" alt="Icon" />
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content side="top" align="center">
      Подсказка по иконке
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>

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

  • Позиционирование через side и align.
  • Анимации появления/исчезновения на базе CSS-переходов.
  • Полная поддержка клавиатурной навигации.

Галереи изображений и фокусировка

Для создания интерактивных галерей можно комбинировать Dialog, Avatar и Tooltip. Radix UI позволяет управлять фокусом и aria-атрибутами для доступности. Пример структуры галереи:

<div className="grid grid-cols-4 gap-4">
  {images.map((image) => (
    <Dialog.Root key={image.id}>
      <Dialog.Trigger asChild>
        <img src={image.thumbnail} alt={image.alt} />
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed inset-0 flex items-center justify-center">
          <img src={image.full} alt={image.alt} />
          <Dialog.Close className="absolute top-4 right-4">X</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  ))}
</div>

Важные детали:

  • Использование map обеспечивает динамическую генерацию галереи.
  • Каждый элемент имеет свой Dialog.Root, что позволяет открывать отдельное изображение без конфликтов.
  • Можно добавлять анимации и lazy loading для оптимизации производительности.

Стилизация и адаптивность

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

  • object-fit: cover или contain для сохранения пропорций.
  • CSS-переменные Radix для размеров и состояний (--radix-avatar-size, --radix-tooltip-content-transform-origin).
  • Media queries для адаптации галерей на мобильных устройствах.

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

Оглавление