Компонент NumberControl в WordPress — это экспериментальный элемент для ввода числовых значений, предоставляющий дополнительные возможности по сравнению с обычным полем ввода типа number. Он позволяет управлять значением с помощью кнопок, мыши, клавиш и поддерживает функции, такие как контроль диапазона значений, шаг и настройка действий при удержании клавиши Shift.
Пример использования NumberControl
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { useState } from 'react';
const ExampleComponent = () => {
const [value, setValue] = useState(10);
return (
<NumberControl
label="Введите значение:"
onChange={(newValue) => setValue(newValue)}
value={value}
min={5}
max={100}
step={5}
shiftStep={20}
isShiftStepEnabled={true}
isDragEnabled={true}
dragDirection="e"
spinControls="custom"
/>
);
};
Описание параметров (Props) компонента NumberControl
1. dragDirection
- Описание: Определяет направление оси для изменения значения при перетаскивании.
- Возможные значения:
'n'(север),'e'(восток),'s'(юг),'w'(запад). - Тип:
string - Обязательный: Нет
- Значение по умолчанию:
'n'
2. dragThreshold
- Описание: Определяет количество пикселей, на которое нужно сдвинуть мышь перед изменением значения (если
isDragEnabledустановлено вtrue). - Тип:
number - Обязательный: Нет
- Значение по умолчанию:
10
3. spinControls
- Описание: Тип кнопок для быстрого увеличения и уменьшения значения.
- Возможные значения:
'none'— не отображать кнопки.'native'— использовать стандартные HTML-кнопки.'custom'— использовать кнопки с иконками «плюс» и «минус».
- Тип:
string - Обязательный: Нет
- Значение по умолчанию:
'native'
4. isDragEnabled
- Описание: Включает возможность изменения значения при перетаскивании мышью.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
5. isShiftStepEnabled
- Описание: Позволяет изменять значение с увеличенным шагом при удержании клавиши
Shiftи нажатии стрелок вверх/вниз. - Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
true
6. label
- Описание: Текст для отображения метки рядом с полем ввода.
- Тип:
string - Обязательный: Нет
7. labelPosition
- Описание: Положение метки относительно поля ввода.
- Возможные значения:
'top','side','bottom','edge'. - Тип:
string - Обязательный: Нет
8. max
- Описание: Максимально допустимое значение.
- Тип:
number - Обязательный: Нет
- Значение по умолчанию:
Infinity
9. min
- Описание: Минимально допустимое значение.
- Тип:
number - Обязательный: Нет
- Значение по умолчанию:
-Infinity
10. onChange
- Описание: Функция, вызываемая при изменении значения. Получает два аргумента:
newValue(новое значение) иextra(объект, содержащий событие браузера). - Тип:
(newValue, extra) => void - Обязательный: Нет
11. required
- Описание: Указывает, что значение должно быть валидным числом в диапазоне
minиmax. При значенииfalseдопускается пустая строка как допустимое значение. - Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
12. shiftStep
- Описание: Шаг для увеличения значения при удержании клавиши
Shift. Этот шаг умножается на стандартный шаг (step). - Тип:
number - Обязательный: Нет
- Значение по умолчанию:
10
13. step
- Описание: Значение, на которое изменяется число при инкременте или декременте. Может быть установлено как
'any', чтобы отключить проверку на кратность шагу. - Тип:
number | "any" - Обязательный: Нет
- Значение по умолчанию:
1
14. __next40pxDefaultSize
- Описание: Экспериментальная функция, включающая новый размер по умолчанию, который будет применен в будущем.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
Пример с настройкой диапазона значений и шагом
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { useState } from 'react';
const RangeExample = () => {
const [value, setValue] = useState(50);
return (
<NumberControl
label="Установите значение (от 10 до 100):"
onChange={(newValue) => setValue(newValue)}
value={value}
min={10}
max={100}
step={5}
/>
);
};
Пример с пользовательскими кнопками инкремента и использованием drag
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { useState } from 'react';
const DragExample = () => {
const [value, setValue] = useState(20);
return (
<NumberControl
label="Перетаскивайте для изменения значения:"
onChange={(newValue) => setValue(newValue)}
value={value}
isDragEnabled={true}
dragDirection="e"
dragThreshold={15}
spinControls="custom"
step={2}
/>
);
};
Пример с шагом Shift
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { useState } from 'react';
const ShiftStepExample = () => {
const [value, setValue] = useState(5);
return (
<NumberControl
label="Изменение с шагом при удержании Shift:"
onChange={(newValue) => setValue(newValue)}
value={value}
step={1}
shiftStep={10}
isShiftStepEnabled={true}
/>
);
};
Заключение
Компонент NumberControl предоставляет гибкие возможности для числового ввода, включая контроль значений через мышь, клавиши и дополнительные параметры.