Компонент InputControl в WordPress является экспериментальным и предоставляет возможность ввода и редактирования текста в интерфейсе. Он предназначен для того, чтобы со временем заменить TextControl или быть объединенным с ним. Давайте рассмотрим, как использовать этот компонент и подробно разберем все его параметры.
Импорт компонента InputControl
Так как компонент InputControl находится на этапе эксперимента, его следует импортировать как __experimentalInputControl из @wordpress/components:
import { __experimentalInputControl as InputControl } from '@wordpress/components';
import { useState } from 'react';
Пример использования InputControl
Вот базовый пример использования компонента InputControl. Мы создадим простое текстовое поле, значение которого будет изменяться с помощью функции onChange.
const Example = () => {
const [inputValue, setInputValue] = useState('');
return (
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue ?? '')}
/>
);
};
В этом примере мы создали переменную состояния inputValue с помощью useState, а также настроили onChange для обновления значения в InputControl.
Подробное описание параметров InputControl
Компонент InputControl предоставляет широкие возможности настройки. Вот все его параметры:
- disabled — Отключает поле ввода, делая его недоступным для редактирования. Полезно для случаев, когда необходимо отобразить значение без возможности изменения.
- Тип:
Boolean - Обязательный: Нет
- Значение по умолчанию:
false
- Тип:
<InputControl
value="Пример текста"
disabled={true}
/>
- isPressEnterToChange — Если установлено в
true, изменение значения будет происходить только при нажатии клавиши ENTER. Также изменение будет срабатывать при потере фокуса (событиеonBlur), например, при переходе на другой элемент с помощью клавиши TAB.- Тип:
Boolean - Обязательный: Нет
- Значение по умолчанию:
false
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
isPressEnterToChange={true}
/>
- hideLabelFromVision — Делает метку (
label) видимой только для экранных читалок, скрывая её из визуального интерфейса. Удобно для улучшения доступности, когда визуальная метка не требуется.- Тип:
Boolean - Обязательный: Нет
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
label="Скрытая метка"
hideLabelFromVision={true}
/>
- label — Устанавливает текст метки для поля ввода, обеспечивая понятность интерфейса для пользователей.
- Тип:
String - Обязательный: Нет
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
label="Имя пользователя"
/>
- labelPosition — Задаёт позицию метки относительно поля ввода. Поддерживаемые значения:
top,side,bottom,edge.- Тип:
String - Обязательный: Нет
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
label="Электронная почта"
labelPosition="side"
/>
- onChange — Функция, вызываемая при изменении значения в поле. Принимает текущее значение в качестве аргумента и является обязательной.
- Тип:
Function - Обязательный: Да
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
/>
- prefix — Отображает элемент слева от текстового поля, что позволяет, например, добавить символ валюты или иконку.
- Тип:
React.ReactNode - Обязательный: Нет
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
prefix="💰"
/>
- size — Определяет размер поля ввода. Поддерживаемые значения:
defaultиsmall.- Тип:
String - Обязательный: Нет
- Значение по умолчанию:
default
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
suffix="км/ч"
/>
- suffix — Добавляет элемент справа от текстового поля, что позволяет, например, отображать единицы измерения.
- Тип:
React.ReactNode - Обязательный: Нет
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
suffix="км/ч"
/>
- type — Определяет тип HTML-элемента
input. По умолчанию —text. Поддерживает любые допустимые значения типаinput.- Тип:
String - Обязательный: Нет
- Значение по умолчанию:
"text"
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
type="email"
/>
- value — Текущее значение поля ввода. Оно связывается с состоянием компонента, обеспечивая контроль над значением.
- Тип:
String - Обязательный: Нет
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
/>
- __next40pxDefaultSize — Экспериментальный параметр, позволяющий активировать новую высоту поля (40px), которая станет стандартной в будущем. Пока что этот параметр отключен по умолчанию.
- Тип:
Boolean - Обязательный: Нет
- Значение по умолчанию:
false
- Тип:
<InputControl
value={inputValue}
onChange={(newValue) => setInputValue(newValue)}
__next40pxDefaultSize={true}
/>
Заключение
Компонент InputControl в WordPress представляет собой мощный инструмент для создания и настройки текстовых полей ввода. Он предоставляет гибкость и поддержку различных параметров, таких как метки, префиксы, суффиксы, контроль размера и другие возможности. Благодаря этим параметрам разработчики могут легко адаптировать InputControl к потребностям интерфейса и обеспечивать высокий уровень доступности и пользовательского опыта.