Компонент ToggleGroupControlOptionIcon — это экспериментальный элемент в WordPress, предназначенный для использования внутри компонента ToggleGroupControl. Этот компонент позволяет создавать опции с иконками, делая интерфейс более наглядным. Благодаря возможности использовать различные иконки, ToggleGroupControlOptionIcon помогает пользователю быстрее ориентироваться в интерфейсе.
Описание и возможности компонента ToggleGroupControlOptionIcon
Компонент ToggleGroupControlOptionIcon позволяет добавлять иконки для каждой опции, делая их интуитивно понятными и легко различимыми. Это особенно полезно в тех случаях, когда необходимо компактное, но визуально информативное представление доступных опций.
Пример базового использования
Пример ниже демонстрирует, как использовать ToggleGroupControlOptionIcon для создания интерфейса выбора стиля текста (верхний регистр и нижний регистр) с помощью иконок:
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { formatUppercase, formatLowercase } from '@wordpress/icons';
function TextFormatToggle() {
return (
<ToggleGroupControl label="Формат текста" __nextHasNoMarginBottom>
<ToggleGroupControlOptionIcon
value="uppercase"
icon={formatUppercase}
label="Верхний регистр"
/>
<ToggleGroupControlOptionIcon
value="lowercase"
icon={formatLowercase}
label="Нижний регистр"
/>
</ToggleGroupControl>
);
}
В этом примере мы создаем группу с двумя опциями: «Верхний регистр» и «Нижний регистр». Каждая из них представлена соответствующей иконкой.
Параметры (Props) компонента ToggleGroupControlOptionIcon
Рассмотрим каждый параметр, который можно передать в ToggleGroupControlOptionIcon, для создания функционального и удобного интерфейса.
1. value
Тип: string | number
Описание: Значение опции ToggleGroupControlOptionIcon. Это значение используется для идентификации выбранной опции внутри группы ToggleGroupControl. Параметр обязателен и должен быть уникальным для каждой опции в пределах группы.
<ToggleGroupControlOptionIcon
value="small-caps"
icon={formatUppercase}
label="Малые прописные"
/>
2. icon
Тип: Component
Описание: Иконка, отображаемая в качестве содержимого опции. Обычно это одна из иконок из пакета @wordpress/icons, но можно использовать и кастомные SVG-иконки, создавая уникальные иконки для интерфейса. Параметр icon обязателен и используется для визуализации опции.
import { formatText, formatBold } from '@wordpress/icons';
<ToggleGroupControlOptionIcon
value="bold"
icon={formatBold}
label="Полужирный текст"
/>
3. label
Тип: string
Описание: Текст, который служит меткой для иконки. Этот параметр обязателен, и он используется не только для описания иконки, но и для создания доступного интерфейса с подсказками. Всплывающая подсказка с меткой отображается при наведении на иконку, что делает интерфейс удобным для пользователей.
<ToggleGroupControlOptionIcon
value="italic"
icon={formatText}
label="Курсивный текст"
/>
Полный пример использования ToggleGroupControl и ToggleGroupControlOptionIcon
Приведенный ниже пример демонстрирует, как использовать ToggleGroupControlOptionIcon для создания выбора стиля текста, включая такие опции, как полужирный, курсив и подчеркивание, с помощью соответствующих иконок.
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { formatBold, formatItalic, formatUnderline } from '@wordpress/icons';
import { useState } from 'react';
const TextStyleToggleGroup = () => {
const [selectedStyle, setSelectedStyle] = useState('bold');
return (
<ToggleGroupControl
label="Выберите стиль текста"
value={selectedStyle}
onChange={(newStyle) => setSelectedStyle(newStyle)}
__nextHasNoMarginBottom
>
<ToggleGroupControlOptionIcon
value="bold"
icon={formatBold}
label="Полужирный"
/>
<ToggleGroupControlOptionIcon
value="italic"
icon={formatItalic}
label="Курсив"
/>
<ToggleGroupControlOptionIcon
value="underline"
icon={formatUnderline}
label="Подчеркнутый"
/>
</ToggleGroupControl>
);
};
Здесь каждая опция представляет один из стилей текста. ToggleGroupControl управляет состоянием выбора, изменяя стиль текста в зависимости от выбранной иконки.
Заключение
Компонент ToggleGroupControlOptionIcon в WordPress позволяет создавать интуитивно понятный интерфейс выбора с использованием иконок, что улучшает восприятие и удобство использования.