Компонент MenuItemsChoice в WordPress используется для отображения набора вариантов, из которых пользователь может выбрать только один. Он предоставляет удобный способ для создания меню с возможностью выбора, где один из элементов всегда активен.
Основы Компонента MenuItemsChoice
MenuItemsChoice функционирует аналогично набору кнопок, но позволяет выбрать только один вариант из нескольких предложенных. Часто используется внутри MenuGroup, чтобы выделить группу взаимосвязанных опций.
Импорт Компонента MenuItemsChoice
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
Пример Базового Использования MenuItemsChoice
В этом примере создается меню, которое позволяет пользователю выбирать между визуальным и текстовым редактором. При выборе одной из опций другие автоматически снимают выделение.
import { useState } from 'react';
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
const EditorModeSelector = () => {
const [mode, setMode] = useState('visual');
const choices = [
{ value: 'visual', label: 'Визуальный редактор' },
{ value: 'code', label: 'Редактор кода' },
];
return (
<MenuGroup label="Режим редактора">
<MenuItemsChoice
choices={choices}
value={mode}
onSelect={(newMode) => setMode(newMode)}
/>
</MenuGroup>
);
};
В этом примере, когда пользователь выбирает один из режимов редактора, состояние обновляется, и другой вариант автоматически деактивируется.
Параметры Компонента MenuItemsChoice
choices
Массив объектов, каждый из которых представляет один вариант выбора. Каждый объект должен включать следующие свойства:
- value: Уникальное значение для каждого варианта.
- label: Текст, отображаемый для варианта.
Тип: Array<{ value: string, label: string }>
Обязательный: Да
const choices = [
{ value: 'day', label: 'Дневной режим' },
{ value: 'night', label: 'Ночной режим' },
];
value
Значение текущего выбранного элемента. Это значение обновляется каждый раз, когда пользователь выбирает новый вариант.
Тип: string
Обязательный: Да
onSelect
Функция обратного вызова, вызываемая при выборе пользователем нового элемента. Она принимает одно значение — value выбранного элемента, что позволяет обновить состояние компонента.
Тип: function
Обязательный: Да
const handleSelection = (newChoice) => {
console.log('Выбранный режим:', newChoice);
};
Пример 1: Выбор Темы
Этот пример позволяет пользователю выбрать между светлой и темной темой интерфейса. Выбранная тема отображается на экране.
import { useState } from 'react';
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
const ThemeSelector = () => {
const [theme, setTheme] = useState('light');
const themes = [
{ value: 'light', label: 'Светлая тема' },
{ value: 'dark', label: 'Темная тема' },
];
return (
<MenuGroup label="Выбор темы">
<MenuItemsChoice
choices={themes}
value={theme}
onSelect={(newTheme) => setTheme(newTheme)}
/>
</MenuGroup>
);
};
Пример 2: Настройки Языка
Здесь создается MenuItemsChoice для выбора языка интерфейса. Пользователь может переключаться между несколькими языковыми вариантами.
import { useState } from 'react';
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
const LanguageSelector = () => {
const [language, setLanguage] = useState('ru');
const languages = [
{ value: 'en', label: 'Английский' },
{ value: 'ru', label: 'Русский' },
{ value: 'es', label: 'Испанский' },
];
return (
<MenuGroup label="Выбор языка">
<MenuItemsChoice
choices={languages}
value={language}
onSelect={(newLanguage) => setLanguage(newLanguage)}
/>
</MenuGroup>
);
};
Пример 3: Выбор Просмотра
В данном примере пользователь может выбрать между разными режимами просмотра, такими как «Таблица» и «Список». Это может быть полезно для настройки отображения элементов на экране.
import { useState } from 'react';
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
const ViewModeSelector = () => {
const [viewMode, setViewMode] = useState('table');
const viewModes = [
{ value: 'table', label: 'Табличный вид' },
{ value: 'list', label: 'Список' },
];
return (
<MenuGroup label="Режим просмотра">
<MenuItemsChoice
choices={viewModes}
value={viewMode}
onSelect={(newViewMode) => setViewMode(newViewMode)}
/>
</MenuGroup>
);
};
Пример 4: Выбор Режима Редактирования
Этот пример позволяет пользователю выбрать между режимами «Простое редактирование» и «Расширенное редактирование».
import { useState } from 'react';
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
const EditModeSelector = () => {
const [editMode, setEditMode] = useState('simple');
const modes = [
{ value: 'simple', label: 'Простое редактирование' },
{ value: 'advanced', label: 'Расширенное редактирование' },
];
return (
<MenuGroup label="Режим редактирования">
<MenuItemsChoice
choices={modes}
value={editMode}
onSelect={(newMode) => setEditMode(newMode)}
/>
</MenuGroup>
);
};
Заключение
Компонент MenuItemsChoice — мощный инструмент для создания меню с выбором одной опции из нескольких. Используя этот компонент, вы можете легко организовать интерфейс, который позволяет пользователю выбирать один из множества вариантов. С помощью таких параметров, как choices, value и onSelect, MenuItemsChoice предоставляет гибкость и простоту для интеграции в WordPress.