ToggleGroupControlOption — это дочерний элемент для компонента ToggleGroupControl в WordPress, предназначенный для создания отдельных опций в группе выбора. Поскольку этот компонент находится на стадии эксперимента, его API может измениться в будущих версиях. ToggleGroupControlOption позволяет задать каждую опцию в группе переключателей и предоставляет гибкость для создания интуитивного интерфейса.
Основные возможности компонента ToggleGroupControlOption
ToggleGroupControlOption определяет отдельные опции в группе и позволяет установить значение, метку и подсказку при наведении, что делает выбор пользователя более информативным и простым.
Пример базового использования
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';
import { useState } from 'react';
const ExampleToggleGroup = () => {
const [selectedLayout, setSelectedLayout] = useState('list');
return (
<ToggleGroupControl
label="Выберите макет отображения"
value={selectedLayout}
onChange={(newLayout) => setSelectedLayout(newLayout)}
>
<ToggleGroupControlOption value="grid" label="Сетка" showTooltip={true} />
<ToggleGroupControlOption value="list" label="Список" showTooltip={false} />
<ToggleGroupControlOption value="table" label="Таблица" />
</ToggleGroupControl>
);
};
В этом примере ToggleGroupControlOption используется для создания трех опций: «Сетка», «Список» и «Таблица». Подсказка при наведении включена только для первой опции.
Параметры (Props) компонента ToggleGroupControlOption
1. label
Тип: string
Описание: Определяет текстовую метку для опции. Этот параметр обязателен, так как именно он отображается пользователю и помогает понять назначение каждой опции.
<ToggleGroupControlOption
value="compact"
label="Компактный вид"
/>
2. value
Тип: string | number
Описание: Значение для опции ToggleGroupControlOption. Параметр обязателен и должен быть уникальным для каждой опции внутри группы ToggleGroupControl, так как это значение будет использоваться для идентификации выбранной опции.
<ToggleGroupControlOption
value="detailed"
label="Детальный вид"
/>
3. showTooltip
Тип: boolean
Описание: Позволяет показывать подсказку при наведении на опцию. Если значение showTooltip установлено в true, то при наведении на элемент появится всплывающая подсказка. Текст подсказки берется из параметра aria-label (если он задан) или из label, если aria-label отсутствует.
<ToggleGroupControlOption
value="fullscreen"
label="Полноэкранный режим"
showTooltip={true}
/>
Полный пример использования ToggleGroupControl и ToggleGroupControlOption
В этом примере создается интерфейс для выбора типа макета и режима отображения, где каждая опция имеет уникальные параметры, включая подсказку при наведении.
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';
import { useState } from 'react';
const FullExampleToggleGroupControl = () => {
const [layout, setLayout] = useState('grid');
const [themeMode, setThemeMode] = useState('light');
return (
<div>
{/* Группа переключателей для выбора макета */}
<ToggleGroupControl
label="Тип макета"
value={layout}
onChange={(newLayout) => setLayout(newLayout)}
isBlock
>
<ToggleGroupControlOption
value="grid"
label="Сетка"
showTooltip={true}
/>
<ToggleGroupControlOption
value="list"
label="Список"
showTooltip={false}
/>
<ToggleGroupControlOption
value="table"
label="Таблица"
showTooltip={true}
/>
</ToggleGroupControl>
{/* Группа переключателей для выбора темы */}
<ToggleGroupControl
label="Режим отображения"
value={themeMode}
onChange={(newMode) => setThemeMode(newMode)}
isBlock
>
<ToggleGroupControlOption
value="light"
label="Светлый"
showTooltip={false}
/>
<ToggleGroupControlOption
value="dark"
label="Тёмный"
showTooltip={true}
/>
<ToggleGroupControlOption
value="contrast"
label="Контрастный"
showTooltip={true}
/>
</ToggleGroupControl>
</div>
);
};
В этом примере мы используем ToggleGroupControlOption для определения опций в двух различных группах: первая для выбора макета (сетка, список, таблица), вторая — для режима отображения (светлый, тёмный, контрастный). Каждая опция настроена индивидуально, что позволяет пользователю легко выбрать нужный параметр.
Заключение
Компонент ToggleGroupControlOption позволяет гибко настроить отдельные элементы выбора в группе переключателей, улучшая пользовательский интерфейс.