Close кнопка

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

Импорт и базовое использование

Для начала необходимо импортировать компонент из пакета @radix-ui/react-dialog или @radix-ui/react-alert-dialog, в зависимости от контекста:

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

Компонент Close используется как дочерний элемент внутри контейнера, поддерживающего закрытие:

<Dialog.Root>
  <Dialog.Trigger>Открыть окно</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Заголовок модального окна</Dialog.Title>
    <Dialog.Description>Описание содержимого окна</Dialog.Description>
    
    <Dialog.Close>Закрыть</Dialog.Close>
  </Dialog.Content>
</Dialog.Root>

В этом примере Dialog.Close автоматически вызывает закрытие модального окна при нажатии. Не требуется дополнительная логика для управления состоянием, что упрощает интеграцию.

Настройка визуального отображения

Компонент Close является функционально нейтральным по стилю, что позволяет полностью контролировать его внешний вид через CSS или CSS-in-JS. Например:

<Dialog.Close className="close-button">
  ×
</Dialog.Close>

<style>
.close-button {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}
.close-button:hover {
  color: red;
}
</style>

Ключевые моменты при стилизации:

  • Компонент должен оставаться доступным для клавиатуры (tabindex=0 управляется Radix автоматически).
  • Для визуальных кнопок рекомендуется использовать символы × или иконки, так как они привычны пользователю.
  • Позиционирование обычно абсолютное, в углу контейнера.

Работа с кастомными элементами

Можно использовать собственные компоненты или элементы в качестве Close:

<Dialog.Close asChild>
  <button className="custom-close">
    <svg width="16" height="16" viewBox="0 0 24 24">
      <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" strokeWidth="2"/>
    </svg>
  </button>
</Dialog.Close>

Использование свойства asChild позволяет:

  • Передавать кастомный элемент вместо стандартного <button>.
  • Сохранять поведение Close, включая доступность и управление фокусом.
  • Полностью контролировать стили и анимацию элемента.

Управление фокусом и доступностью

Radix UI автоматически обрабатывает:

  • Закрытие при нажатии клавиши Escape.
  • Возврат фокуса к триггеру после закрытия.
  • Обеспечение корректного поведения для экранных ридеров.

Пример с модальным окном:

<Dialog.Content>
  <Dialog.Close aria-label="Закрыть окно" />
</Dialog.Content>

Рекомендации по доступности:

  • Всегда указывать aria-label для кнопки, если визуальный текст отсутствует.
  • Проверять, что кнопка находится внутри контейнера, поддерживающего управление состоянием.

Интеграция с анимациями

Close можно комбинировать с анимациями появления/исчезновения контента:

<Dialog.Content className="content">
  <Dialog.Close className="close-button" />
</Dialog.Content>

<style>
.content {
  animation: fadeIn 0.2s ease-out;
}
.close-button {
  transition: transform 0.2s ease;
}
.close-button:hover {
  transform: scale(1.1);
}
</style>

Radix не ограничивает использование CSS-анимаций или библиотек типа Framer Motion, что позволяет создавать плавные интерактивные интерфейсы.

Использование в других компонентах

Close применяется не только для модальных окон:

  • В AlertDialog для закрытия предупреждающих диалогов.
  • В Toast для закрытия уведомлений.
  • В Collapsible или Accordion для закрытия панели.

Пример с уведомлением:

<Toast.Root>
  <Toast.Title>Сообщение отправлено</Toast.Title>
  <Toast.Close>×</Toast.Close>
</Toast.Root>

Преимущества использования Radix Close

  • Автоматическое управление состоянием — не требуется писать обработчики для закрытия.
  • Доступность из коробки — поддержка клавиатуры и экранных ридеров.
  • Гибкость стилизации — возможность использовать собственные кнопки и анимации через asChild.
  • Универсальность — подходит для различных интерактивных компонентов библиотеки.

Хотите, могу сделать отдельный раздел с продвинутыми трюками, включая комбинацию Close с контекстным состоянием и динамическими списками?

Оглавление