ToggleControl — это компонент интерфейса пользователя в WordPress, предназначенный для создания переключателей. Он полезен для включения или отключения различных настроек, например, фоновых свойств, параметров видимости и других функций.
Основные особенности ToggleControl
Компонент ToggleControl рендерит простой переключатель с возможностью настройки, что делает его удобным инструментом для создания удобных интерфейсов. Он поддерживает такие свойства, как label для текста метки, help для вспомогательного текста, checked для состояния переключателя, и другие, что позволяет гибко управлять его поведением.
Пример базового использования
import { useState } from 'react';
import { ToggleControl } from '@wordpress/components';
const ExampleToggleControl = () => {
const [isFeatureEnabled, setIsFeatureEnabled] = useState(false);
return (
<ToggleControl
label="Включить новую функцию"
help={isFeatureEnabled ? 'Функция включена.' : 'Функция отключена.'}
checked={isFeatureEnabled}
onChange={(newState) => setIsFeatureEnabled(newState)}
/>
);
};
В этом примере ToggleControl используется для активации функции. Переключение обновляет состояние isFeatureEnabled, а вспомогательный текст help показывает, включена ли функция.
Основные параметры (Props) компонента ToggleControl
1. label
Тип: string
Описание: Определяет текст метки для переключателя. Это свойство не является обязательным, но добавление метки улучшает удобство использования компонента.
<ToggleControl
label="Анимация заголовка"
/>2. help
Тип: string | React.Element | Function
Описание: Определяет вспомогательный текст под переключателем, который может быть статичным или динамически меняться в зависимости от состояния. Если передается функция, она принимает текущее состояние checked и возвращает строку, соответствующую этому состоянию.
import { useState } from 'react';
import { ToggleControl } from '@wordpress/components';
const HelpToggleControlExample = () => {
const [isBold, setIsBold] = useState(false);
return (
<ToggleControl
label="Текст жирный"
help={() => (isBold ? 'Текст теперь жирный' : 'Текст не жирный')}
checked={isBold}
onChange={setIsBold}
/>
);
};
3. checked
Тип: boolean
Описание: Определяет начальное состояние переключателя. Если true, переключатель установлен; если false, отключен. Это свойство можно изменить, чтобы сделать компонент управляемым или неуправляемым.
<ToggleControl
label="Уведомления"
checked={true}
/>
4. disabled
Тип: boolean
Описание: Если true, делает компонент недоступным для взаимодействия, а также применяет соответствующие стили. Это полезно для отключения функций, которые недоступны в текущих условиях.
<ToggleControl
label="Изменение доступно"
disabled={true}
help="Переключатель временно отключен"
/>
5. onChange
Тип: function
Описание: Функция, вызываемая при изменении состояния переключателя. Получает в качестве аргумента текущее состояние checked, что позволяет гибко управлять реакцией на переключение.
import { useState } from 'react';
import { ToggleControl } from '@wordpress/components';
const OnChangeExample = () => {
const [isEmailEnabled, setIsEmailEnabled] = useState(false);
const handleToggle = (newValue) => {
setIsEmailEnabled(newValue);
console.log(`Уведомления по email: ${newValue ? 'включены' : 'отключены'}`);
};
return (
<ToggleControl
label="Уведомления по email"
checked={isEmailEnabled}
onChange={handleToggle}
/>
);
};
6. className
Тип: string
Описание: Устанавливает CSS-класс для компонента, что позволяет задавать уникальные стили. Классы components-base-control и components-toggle-control добавляются по умолчанию.
<ToggleControl
label="Фиксированное положение"
className="custom-toggle-style"
/>
7. __nextHasNoMarginBottom
Тип: boolean
Описание: Если установлено в true, компонент отображается без нижнего поля. Это важно для новых стилей, которые могут стать стандартом в будущих версиях WordPress.
<ToggleControl
label="Автоматическая синхронизация"
__nextHasNoMarginBottom={true}
/>
Полный пример использования ToggleControl
В этом примере создается интерфейс с тремя переключателями, каждый из которых включает или отключает разные настройки.
import { useState } from 'react';
import { ToggleControl } from '@wordpress/components';
const AdvancedToggleControlExample = () => {
const [isAutoSaveEnabled, setIsAutoSaveEnabled] = useState(false);
const [isDarkMode, setIsDarkMode] = useState(false);
const [isNotificationsOn, setIsNotificationsOn] = useState(true);
return (
<div>
<ToggleControl
label="Автосохранение"
help={isAutoSaveEnabled ? 'Автосохранение включено.' : 'Автосохранение отключено.'}
checked={isAutoSaveEnabled}
onChange={setIsAutoSaveEnabled}
/>
<ToggleControl
label="Тёмная тема"
help={isDarkMode ? 'Темный режим активирован.' : 'Светлый режим активирован.'}
checked={isDarkMode}
onChange={setIsDarkMode}
className="dark-mode-toggle"
/>
<ToggleControl
label="Уведомления"
help={isNotificationsOn ? 'Вы будете получать уведомления.' : 'Уведомления отключены.'}
checked={isNotificationsOn}
onChange={setIsNotificationsOn}
disabled={!isDarkMode}
/>
</div>
);
};
Заключение
Компонент ToggleControl в WordPress — это удобный способ создания переключателей для управления различными параметрами.