Шаг и границы значений

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

Свойство min и max

Для большинства интерактивных элементов в React Aria задаются минимальные и максимальные значения:

import {useNumberField} from '@react-aria/numberfield';

let {labelProps, inputProps} = useNumberField({
  label: 'Возраст',
  minValue: 18,
  maxValue: 100,
  value: age,
  onChange: setAge
});
  • minValue — минимальное значение, которое может быть установлено пользователем.
  • maxValue — максимальное значение.
  • Значения вне указанного диапазона автоматически корректируются при изменении через клавиатуру или кнопки увеличения/уменьшения.

React Aria обеспечивает корректное поведение с клавиатуры, кнопок и скринридеров, предотвращая выход значения за границы.

Шаговые изменения (step)

Параметр step определяет дискретность изменения значения:

useNumberField({
  label: 'Количество',
  minValue: 0,
  maxValue: 10,
  step: 2,
  value: quantity,
  onChange: setQuantity
});
  • При step: 2 каждое нажатие кнопки увеличения или уменьшения изменяет значение на 2 единицы.
  • Если текущее значение не кратно шагу, React Aria корректирует его к ближайшему допустимому значению при взаимодействии.

Особенности шагов с дробными значениями

React Aria поддерживает дробные шаги:

useNumberField({
  label: 'Цена',
  minValue: 0,
  maxValue: 10,
  step: 0.5,
  value: price,
  onChange: setPrice
});
  • Дробные шаги полезны для денежных значений, процентных ставок или других метрик с высокой точностью.
  • При округлении React Aria учитывает корректную точность, предотвращая накопление ошибок из-за плавающей запятой.

Реакция на клавиатурные события

Элементы с шагами и границами полностью интегрированы с клавиатурой:

  • Arrow Up / Arrow Down — увеличивают или уменьшают значение на величину step.
  • Page Up / Page Down — могут использоваться для увеличения значения на step * 10, если настроено.
  • Home / End — мгновенно устанавливают минимальное или максимальное значение.

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

Валидация и контроль значения

React Aria автоматически корректирует недопустимые значения:

  • Ввод текста, который не соответствует числу, игнорируется.
  • Значения, превышающие maxValue, устанавливаются на maxValue.
  • Значения ниже minValue устанавливаются на minValue.
  • Если шаг не делит разницу между текущим значением и minValue, компонент корректирует значение к ближайшему корректному шагу.
useNumberField({
  label: 'Вес',
  minValue: 50,
  maxValue: 150,
  step: 5,
  value: weight,
  onChange: setWeight
});

Например, при weight = 52 и step = 5 React Aria автоматически скорректирует значение на 50 или 55 в зависимости от направления изменения.

Слайдеры и диапазоны

Для компонентов слайдеров или диапазонов те же свойства применяются:

import {useSlider} from '@react-aria/slider';

let {trackProps, thumbProps} = useSlider({
  minValue: 0,
  maxValue: 100,
  step: 10,
  value: volume,
  onChange: setVolume
});
  • Слайдер автоматически учитывает шаги при перетаскивании ползунка.
  • Значение всегда ограничено минимальным и максимальным значением.
  • Шаги обеспечивают удобное взаимодействие при тонкой настройке, например, громкости или яркости.

Динамическая смена границ и шага

React Aria позволяет изменять minValue, maxValue и step во время работы приложения:

setConfig({minValue: 10, maxValue: 50, step: 5});
  • Все связанные элементы мгновенно обновляют своё поведение.
  • Обеспечивается согласованность интерфейса и корректная обработка текущих значений.

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

  1. Всегда задавать minValue и maxValue — это обеспечивает предсказуемость компонента.
  2. Использовать дробные шаги только при необходимости, чтобы не усложнять взаимодействие.
  3. Проверять корректировку при вводе с клавиатуры, чтобы избежать неожиданных округлений.
  4. Для слайдеров использовать шаг, подходящий для длины трека или диапазона, чтобы пользователь мог удобно выбирать значения.

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

Оглавление