Компонент BaseControl из библиотеки WordPress используется для создания меток (labels) и поясняющего текста (help text) для элементов управления, которые работают с пользовательским вводом.
Импорт компонента BaseControl
Чтобы начать работу с BaseControl, его нужно импортировать из пакета @wordpress/components. Также можно воспользоваться хелпером useBaseControlProps для удобного управления свойствами компонента.
import { BaseControl, useBaseControlProps } from '@wordpress/components';Основные параметры компонента BaseControl
Компонент BaseControl поддерживает несколько параметров, которые помогают кастомизировать его внешний вид и функциональность.
__nextHasNoMarginBottom– Указывает, следует ли отключить нижний отступ компонента. По умолчанию имеет значениеfalse, но можно установить его вtrue, чтобы активировать безотступный стиль, который может стать стандартным в будущих версиях.- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
- Тип:
as– Задает HTML-элемент или React-компонент, который будет использоваться в качестве обертки дляBaseControl.- Тип: Строка (название элемента) или React-компонент
- Обязательный: Нет
className– Позволяет указать собственные CSS-классы для кастомизации стилей.- Тип:
string - Обязательный: Нет
- Тип:
children– Содержимое, которое отображается внутриBaseControl. Это основной контент, который будет выводиться в компоненте.- Тип:
ReactNode - Обязательный: Да
- Тип:
help– Дополнительное описание для элемента управления. Оно предназначено для создания пояснений, которые будут ассоциированы сBaseControlчерезaria-describedby.- Тип:
ReactNode - Обязательный: Нет
- Тип:
hideLabelFromVision– Еслиtrue, метка будет видима только для экранных ридеров.- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
- Тип:
id– HTML-идентификатор элемента управления. Обычно рекомендуется использоватьuseBaseControlProps, который автоматически генерирует уникальныйid.- Тип:
string - Обязательный: Нет
- Тип:
label– Если указано, используется в качестве текста метки компонента.- Тип:
ReactNode - Обязательный: Нет
- Тип:
Пример использования BaseControl с текстовым полем
Рассмотрим пример, где BaseControl используется для создания компонента текстовой области с меткой и поясняющим текстом.
import { BaseControl, useBaseControlProps } from '@wordpress/components';
const MyCustomTextareaControl = ({ label, help, placeholder }) => {
// Получаем свойства для BaseControl и внутреннего элемента управления
const { baseControlProps, controlProps } = useBaseControlProps({
label,
help,
});
return (
<BaseControl {...baseControlProps} __nextHasNoMarginBottom>
<textarea {...controlProps} placeholder={placeholder} />
</BaseControl>
);
};
// Использование компонента
<MyCustomTextareaControl
label="Введите описание"
help="Эта текстовая область для ввода длинного текста"
placeholder="Введите ваш текст здесь..."
/>
В этом примере:
labelзадает текст метки для текстовой области.helpобеспечивает пояснение, которое появится под полем ввода.placeholderотображает подсказку внутри текстовой области.
Вложенный компонент BaseControl.VisualLabel
В некоторых случаях удобно использовать BaseControl.VisualLabel для добавления визуальной метки внутри BaseControl, например, когда основной элемент управления (например, кнопка) уже имеет ассоциированную метку.
import { BaseControl } from '@wordpress/components';
import { Button } from '@wordpress/components';
const MyVisualLabelControl = () => (
<BaseControl
__nextHasNoMarginBottom
help="Выберите автора из списка"
>
<BaseControl.VisualLabel>Автор</BaseControl.VisualLabel>
<Button>Выбрать автора</Button>
</BaseControl>
);
// Использование компонента
<MyVisualLabelControl />
Пример с кастомизацией HTML-обертки
Если необходимо изменить HTML-обертку компонента, используйте свойство as.
const MyCustomBaseControl = () => (
<BaseControl
as="fieldset"
label="Настройки поля"
help="Эти настройки применяются к текстовой области"
>
<textarea placeholder="Введите текст" />
</BaseControl>
);
Здесь:
as="fieldset"указывает, что элемент будет представлен как<fieldset>, что полезно для группировки элементов формы.
Заключение
Компонент BaseControl предоставляет гибкие возможности для создания и стилизации элементов управления. Используя параметры label, help, id, и children, можно создать полноценные компоненты для ввода данных в WordPress.