Компонент UnitControl в WordPress — это инструмент для ввода числовых значений с выбором единиц измерения (например, px, %). Он предоставляет гибкие настройки, позволяя адаптировать ввод чисел с различными единицами в пользовательском интерфейсе. Это экспериментальная функция, поэтому изменения в будущем могут быть значительными.
Пример базового использования UnitControl
import { useState } from 'react';
import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
const SimpleUnitControlExample = () => {
const [ value, setValue ] = useState( '15px' );
return <UnitControl onChange={ setValue } value={ value } />;
};
Здесь мы устанавливаем начальное значение в 15px и передаем функцию setValue в onChange для обновления значения.
Свойства компонента UnitControl
Рассмотрим все свойства компонента UnitControl, их типы и возможности для настройки.
1. disableUnits
- Тип:
boolean - Описание: Если установлено в
true, скрывает выпадающий список выбора единиц. - Обязательное: Нет
- По умолчанию:
false
<UnitControl value="20px" onChange={ setValue } disableUnits={ true } />
В этом примере изменения применяются только после нажатия ENTER или при переходе на другой элемент.
3. isResetValueOnUnitChange
- Тип:
boolean - Описание: При установке в
true, значение сбрасывается на дефолтное при смене единицы измерения. - Обязательное: Нет
- По умолчанию:
false
<UnitControl value="30em" onChange={ setValue } isResetValueOnUnitChange={ true } />
При переключении между единицами, значение сбрасывается на стандартное для новой единицы.
4. isUnitSelectTabbable
- Тип:
boolean - Описание: Определяет, можно ли перемещаться на выпадающий список единиц с помощью клавиши TAB.
- Обязательное: Нет
- По умолчанию:
true
<UnitControl value="10rem" onChange={ setValue } isUnitSelectTabbable={ false } />
В этом примере поле выбора единицы не будет доступно через TAB.
5. label
- Тип:
string - Описание: Добавляет текстовую метку к компоненту.
- Обязательное: Нет
<UnitControl value="25vh" onChange={ setValue } label="Высота блока" />
В этом примере компоненту добавлена метка «Высота блока».
6. labelPosition
- Тип:
string - Описание: Задает положение метки. Возможные значения:
top,side,bottom,edge. - Обязательное: Нет
<UnitControl value="40%" onChange={ setValue } label="Ширина" labelPosition="side" />
Здесь метка «Ширина» будет отображаться сбоку от поля.
7. onBlur
- Тип:
FocusEventHandler< HTMLInputElement | HTMLSelectElement > - Описание: Коллбэк, вызываемый при потере фокуса полем ввода или выпадающим списком единиц.
- Обязательное: Нет
<UnitControl value="15px" onChange={ setValue } onBlur={() => console.log('Потеря фокуса')} />
Этот код выведет сообщение в консоль при потере фокуса.
8. onFocus
- Тип:
FocusEventHandler< HTMLInputElement | HTMLSelectElement > - Описание: Коллбэк, вызываемый при фокусировании на поле ввода или выпадающем списке единиц.
- Обязательное: Нет
9. onChange
- Тип:
UnitControlOnChangeCallback - Описание: Функция, вызываемая при изменении значения.
- Обязательное: Нет
10. onUnitChange
- Тип:
UnitControlOnChangeCallback - Описание: Функция, вызываемая при изменении выбранной единицы.
- Обязательное: Нет
11. size
- Тип:
string - Описание: Определяет размер поля. Возможные значения:
default,small. - Обязательное: Нет
- По умолчанию:
default
<UnitControl value="5em" onChange={ setValue } size="small" />
12. units
- Тип:
WPUnitControlUnit[] - Описание: Массив объектов с возможными единицами измерения, где
value— значение,label— отображаемое название,default— значение по умолчанию. - Обязательное: Нет
const units = [
{ value: 'px', label: 'px', default: 0 },
{ value: '%', label: '%', default: 100 },
{ value: 'rem', label: 'rem', default: 1 },
];
<UnitControl onChange={ setValue } value="100%" units={ units } />
13. value
- Тип:
number | string - Описание: Текущее значение компонента.
- Обязательное: Нет
14. __next40pxDefaultSize
- Тип:
boolean - Описание: Переключает компонент на новый размер по умолчанию (40px), который станет стандартом в будущих версиях.
- Обязательное: Нет
- По умолчанию:
false
Заключение
Компонент UnitControl предоставляет гибкие возможности для управления значениями с единицами измерения, что полезно в различных UI-сценариях в WordPress.