Root, Button, Link

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

Основные свойства Root:

  • defaultOpen — начальное состояние компонента (например, для раскрывающегося элемента).
  • onOpenChange — колбэк, вызываемый при изменении состояния открытости.
  • modal — для компонентов, требующих модального поведения (блокировка взаимодействия с остальной страницей).
  • children — дочерние элементы, которые получают контекст Root.

Применение Root особенно важно для компонентов с несколькими вложенными элементами, чтобы избежать конфликтов состояний между ними. Например, в DropdownMenu Root контролирует открытие меню и передаёт это состояние дочерним пунктам меню.

Button

Компонент Button в Radix UI — это полностью стилизуемая и функциональная кнопка, которая сохраняет семантику HTML-кнопки и при этом предоставляет расширяемый API для сложного взаимодействия. Button поддерживает все стандартные HTML-свойства (type, disabled, aria-*) и добавляет управление фокусом, анимации нажатия и интеграцию с Root, если она необходима.

Ключевые особенности Button:

  • Поддержка типов кнопок: button, submit, reset.
  • Интеграция с контекстом Root, например, для закрытия меню при клике на пункт.
  • Поддержка focus-visible и keyboard navigation, что обеспечивает доступность.
  • Встроенные состояния: pressed, disabled, loading (через кастомное расширение).

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

import { Button } from '@radix-ui/react-button';

<Button onCl ick={() => console.log('Нажато!')}>
  Нажми меня
</Button>

Button может использоваться как базовый строительный блок для сложных интерактивных элементов, таких как ToggleButton, DropdownMenuItem или кастомные Switches. Использование Radix Button обеспечивает согласованность поведения и доступность без необходимости вручную управлять состояниями фокуса и нажатия.

Компонент Link в Radix UI — это обертка над стандартным <a> с расширенной функциональностью и поддержкой управления состоянием. Link сохраняет семантику HTML, обеспечивает корректное взаимодействие с клавиатурой и доступность, а также позволяет интегрировать логику Root и другие контролирующие компоненты.

Основные возможности Link:

  • Поддержка всех стандартных атрибутов <a>: href, target, rel.
  • Интеграция с Root для модальных навигаций или динамических меню.
  • Поддержка состояний focus, hover и active с возможностью стилизовать через CSS или библиотеки стилей.
  • Возможность управления событиями через onClick без потери семантики ссылки.

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

import { Link } from '@radix-ui/react-link';

<Link href="/about" onCl ick={() => console.log('Переход')}>
  О компании
</Link>

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

Совместное использование Root, Button и Link позволяет строить сложные интерфейсы: Root управляет состояниями и контекстом, Button выполняет действия и интерактивные функции, Link обеспечивает корректную навигацию. Такое сочетание создаёт модульные и масштабируемые UI-решения, где каждый компонент выполняет свою роль, сохраняя доступность и предсказуемость поведения.

Оглавление