Pressed состояние

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

Основы использования Pressed состояния

В Radix UI для обработки состояния нажатия чаще всего используется хук useButton, useToggle, usePress или компонентные API, которые предоставляют доступ к pressed свойству. Это свойство возвращает булево значение:

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

function MyButton() {
  const { pressed } = useButton();

  return (
    <button className={pressed ? 'pressed' : ''}>
      {pressed ? 'Нажато' : 'Кнопка'}
    </button>
  );
}

Здесь pressed автоматически обновляется при взаимодействии пользователя с кнопкой. Это позволяет динамически изменять стили, текст или выполнять другие действия.

События, влияющие на Pressed состояние

Pressed состояние срабатывает при определённых событиях:

  1. Mouse events

    • mousedown → pressed становится true.
    • mouseup → pressed возвращается в false.

  2. Touch events

    • touchstart → pressed = true.
    • touchend → pressed = false.

  3. Keyboard events (для доступности)

    • Нажатие Enter или Space на фокусированном элементе также устанавливает pressed = true.

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

Стилизация Pressed состояния

Pressed состояние чаще всего визуализируется через CSS. Radix UI не навязывает конкретные стили, но предоставляет хуки и пропсы для интеграции с классами или стилями. Пример с Tailwind CSS:

<button
  className={`px-4 py-2 rounded transition transform ${
    pressed ? 'bg-blue-700 scale-95' : 'bg-blue-500'
  }`}
>
  Нажми меня
</button>

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

  • Добавление scale или translate при pressed создаёт эффект “нажатой” кнопки.
  • Цветовая индикация (background, border, shadow) усиливает восприятие.
  • Переходы через transition делают анимацию более плавной.

Pressed состояние в Toggle и Checkbox

Для компонентов с переключаемым состоянием (Toggle, Checkbox) pressed используется совместно с checked:

import { Toggle } from '@radix-ui/react-toggle';

function MyToggle() {
  return (
    <Toggle
      className={({ pressed, pressed: isPressed }) =>
        `px-3 py-2 rounded ${isPressed ? 'bg-green-600' : 'bg-gray-300'}`
      }
    >
      {isPressed ? 'Активно' : 'Не активно'}
    </Toggle>
  );
}
  • pressed отображает текущий физический контакт пользователя с элементом.
  • checked отображает состояние переключателя логически.

Использование обоих состояний позволяет создавать сложные интерактивные эффекты и корректно обрабатывать доступность.

Pressed состояние и доступность

Radix UI уделяет внимание accessibility (a11y):

  • Состояние pressed синхронизируется с aria-pressed для кнопок и переключателей.
  • Клавиатурные события автоматически корректно обновляют pressed.
  • Комбинация focus-visible + pressed позволяет создавать визуальные индикаторы для пользователей с клавиатурой.

Пример с aria-pressed:

<button
  aria-pressed={pressed}
  className={pressed ? 'pressed' : ''}
>
  Toggle
</button>

Программная реакция на Pressed

Pressed состояние можно использовать не только для стилей, но и для логики приложения:

import { usePress } from '@radix-ui/react-press';

function ActionButton() {
  const { pressed } = usePress({
    onPress: () => console.log('Элемент нажат!'),
  });

  return (
    <button
      className={pressed ? 'bg-red-500' : 'bg-red-300'}
    >
      {pressed ? 'Нажатие' : 'Кнопка'}
    </button>
  );
}
  • onPress срабатывает после завершения нажатия.
  • pressed обновляется в реальном времени, позволяя создавать визуальные эффекты без задержки.

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

  1. Использовать pressed состояние для мгновенной визуальной обратной связи.
  2. Разделять логическое состояние (checked, selected) и физическое (pressed) для интерактивных компонентов.
  3. Обеспечивать плавные переходы через CSS анимации для естественного ощущения нажатия.
  4. Проверять совместимость с клавиатурой и сенсорными экранами, чтобы pressed состояние всегда корректно отражало взаимодействие пользователя.

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

Оглавление