Обработка hover состояния

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

Компоненты с hover-состояниями

В Radix UI большинство компонентов поставляются с преднастроенными интерактивными состояниями, включая hover, focus, active. Примеры компонентов, где hover особенно важен:

  • Button
  • Tooltip
  • Popover
  • Menu

Для обработки hover-состояний используется сочетание CSS-классов и prop-атрибутов, которые Radix автоматически назначает при взаимодействии пользователя.

Использование data-state и data-hover

Radix UI активно применяет атрибуты data-state и data-hover для стилизации состояния компонента. Это позволяет не только менять визуальные эффекты при наведении, но и создавать сложные анимации.

<Button className="button">
  Кнопка
</Button>

<style>
.button {
  background-color: #0070f3;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.button[data-hover] {
  background-color: #005bb5;
}
</style>

В этом примере Radix автоматически добавляет data-hover при наведении курсора, и CSS-селектор button[data-hover] позволяет плавно изменять цвет кнопки.

Использование @radix-ui/react-hover-card

Для более сложных hover-интеракций, например всплывающих карточек, Radix предоставляет компонент HoverCard. Он объединяет логическую часть состояния hover и рендеринг контента, который появляется при наведении.

import * as HoverCard from '@radix-ui/react-hover-card';

<HoverCard.Root>
  <HoverCard.Trigger className="trigger">Наведи на меня</HoverCard.Trigger>
  <HoverCard.Content className="content">
    Содержимое при hover
  </HoverCard.Content>
</HoverCard.Root>

<style>
.trigger {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.content {
  background: white;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0px 4px 16px rgba(0,0,0,0.1);
}
</style>

HoverCard использует внутренние события onMouseEnter и onMouseLeave, обеспечивая управление состоянием hover без необходимости вручную отслеживать состояние через useState.

Анимация и переходы при hover

Для плавного перехода состояний Radix UI работает в связке с CSS-переходами и анимациями. Атрибуты data-state и data-hover позволяют применить различные эффекты:

.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button[data-hover] {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Использование transform и box-shadow в сочетании с data-hover создаёт естественные и отзывчивые hover-эффекты без JavaScript.

Сочетание hover и focus для доступности

Radix UI строго придерживается принципов доступности (a11y). Компоненты корректно обрабатывают hover и focus одновременно. Для кнопок и интерактивных элементов важно учитывать:

  • data-hover — активируется при наведении мыши
  • data-focus — активируется при фокусе клавиатурой
.button[data-focus] {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

.button[data-hover][data-focus] {
  background-color: #004080;
}

Такой подход позволяет различать состояния клавиатуры и мыши, улучшая UX для пользователей с ограниченными возможностями.

Динамическая стилизация с CSS-in-JS

Radix UI полностью совместим с библиотеками CSS-in-JS, такими как styled-components или @stitches/react. Использование data-hover и data-state позволяет динамически менять стили:

import { styled } from '@stitches/react';
import * as HoverCard from '@radix-ui/react-hover-card';

const Trigger = styled(HoverCard.Trigger, {
  padding: '12px 24px',
  borderRadius: '6px',
  backgroundColor: '#0070f3',
  color: 'white',
  '&[data-hover]': {
    backgroundColor: '#005bb5',
  },
  transition: 'background-color 0.2s ease',
});

Это обеспечивает чистоту кода, высокую кастомизацию и отсутствие необходимости вручную управлять событиями мыши.

Практические рекомендации

  • Использовать data-hover и data-state для стилизации вместо прямого :hover, чтобы поддерживать React-рендеринг и доступность.
  • Для сложных hover-элементов применять HoverCard или Tooltip, которые инкапсулируют логику состояния.
  • Всегда добавлять CSS-переходы для плавных эффектов.
  • Сочетать hover с focus для поддержки пользователей клавиатурой.
  • Для CSS-in-JS использовать стилизованные компоненты с селекторами [data-hover].

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

Оглавление