CheckboxControl в WordPress — это компонент, который предоставляет простой и удобный способ создания флажков для выбора одного или нескольких элементов. Флажки позволяют пользователям выбирать несколько элементов из списка, открывать подсписки с дополнительными вариантами и управлять выбором с помощью родительских и дочерних флажков.
Основные особенности CheckboxControl
Компонент CheckboxControl позволяет:
- Выбирать один или несколько элементов из списка.
- Открывать вложенные списки с дополнительными параметрами.
- Создавать связи родительских и дочерних флажков, которые упрощают массовое управление выбором.
Когда использовать CheckboxControl
Используйте CheckboxControl в следующих случаях:
- Когда пользователю нужно выбрать несколько элементов из списка.
- Когда необходимо показать дополнительные опции в зависимости от выбранных параметров.
Не используйте флажки для переключения отдельных настроек. В этих случаях лучше подходит компонент FormToggle.
Пример базового использования CheckboxControl
Простейший пример использования CheckboxControl, где пользователь может установить или снять отметку у флажка, чтобы определить, является ли пользователь автором:
import { useState } from 'react';
import { CheckboxControl } from '@wordpress/components';
const AuthorCheckboxExample = () => {
const [isAuthor, setIsAuthor] = useState(false);
return (
<CheckboxControl
label="Является ли автором?"
help="Определяет, является ли пользователь автором."
checked={isAuthor}
onChange={setIsAuthor}
/>
);
};
Параметры компонента CheckboxControl
label
- Описание: Устанавливает текст, отображаемый рядом с флажком, который служит меткой для элемента.
- Тип:
string - Обязателен: Нет
- Пример использования:
<CheckboxControl label="Получать уведомления" />
help
- Описание: Текст подсказки, отображаемый под флажком, чтобы дать дополнительное пояснение.
- Тип:
stringилиElement - Обязателен: Нет
- Пример использования:
<CheckboxControl
label="Получать новости"
help="Выберите этот флажок, если хотите получать новости и обновления."
/>
checked
- Описание: Определяет, установлен ли флажок (отметка в поле) по умолчанию.
- Тип:
boolean - Обязателен: Нет
- По умолчанию:
false - Пример использования:
<CheckboxControl
label="Подписаться на рассылку"
checked={true}
/>
onChange
- Описание: Функция, которая вызывается при изменении состояния флажка.
- Тип:
function - Обязателен: Да
- Пример использования:
const NotificationsCheckboxExample = () => {
const [notifications, setNotifications] = useState(false);
return (
<CheckboxControl
label="Получать уведомления"
checked={notifications}
onChange={(newValue) => setNotifications(newValue)}
/>
);
};
indeterminate
- Описание: Определяет промежуточное состояние флажка, обычно используется для обозначения частичного выбора.
- Тип:
boolean - Обязателен: Нет
- Пример использования:
<CheckboxControl
label="Выбор частично применен"
checked={false}
indeterminate={true}
/>
__nextHasNoMarginBottom
- Описание: Флаг для отключения отступа снизу, который станет стандартом в будущих версиях.
- Тип:
boolean - Обязателен: Нет
- По умолчанию:
false - Пример использования:
<CheckboxControl
label="Не отображать отступ снизу"
__nextHasNoMarginBottom={true}
/>
Пример с родительским и дочерним флажками
Использование родительских и дочерних флажков позволяет управлять выбором нескольких элементов одновременно. Когда основной флажок установлен, все дочерние флажки также будут установлены.
import { useState } from 'react';
import { CheckboxControl } from '@wordpress/components';
const ParentChildCheckboxExample = () => {
const [allSelected, setAllSelected] = useState(false);
const [option1, setOption1] = useState(false);
const [option2, setOption2] = useState(false);
const handleParentChange = (isChecked) => {
setAllSelected(isChecked);
setOption1(isChecked);
setOption2(isChecked);
};
return (
<div>
<CheckboxControl
label="Выбрать все"
checked={allSelected}
onChange={handleParentChange}
/>
<CheckboxControl
label="Опция 1"
checked={option1}
onChange={setOption1}
/>
<CheckboxControl
label="Опция 2"
checked={option2}
onChange={setOption2}
/>
</div>
);
};
Заключение
Компонент CheckboxControl в WordPress — это мощный инструмент для создания флажков, который предоставляет пользователям гибкость в выборе нескольких параметров. Используя различные параметры компонента, можно легко создавать сложные интерфейсы с родительскими и дочерними флажками, которые облегчают управление выборами.