Компонент MenuItem в WordPress предназначен для создания элементов меню в выпадающем меню (DropdownMenu). Он часто используется для добавления интерактивных кнопок в меню, поддерживает иконки, сочетания клавиш, выделение выбранных элементов и другие полезные функции. В этой статье мы рассмотрим параметры компонента MenuItem, предоставим подробные описания и уникальные примеры его использования.
Основы Компонента MenuItem
Компонент MenuItem представляет собой кнопку, которая может использоваться для создания пунктов меню. Она поддерживает различные параметры, такие как иконки, текстовые описания и обработку событий, что позволяет настроить внешний вид и функциональность элемента меню под конкретные требования.
Импорт Компонента MenuItem
import { MenuItem } from '@wordpress/components';
Пример Базового Использования MenuItem
В этом примере создается MenuItem, который позволяет пользователю переключать состояние (активное или неактивное) с использованием иконки.
import { useState } from 'react';
import { MenuItem } from '@wordpress/components';
const ToggleMenuItem = () => {
const [isActive, setIsActive] = useState(false);
return (
<MenuItem
icon={isActive ? 'yes' : 'no'}
isSelected={isActive}
onClick={() => setIsActive((prevState) => !prevState)}
>
Переключить состояние
</MenuItem>
);
};
В этом примере при нажатии на MenuItem состояние переключается между активным и неактивным, меняя иконку на "yes" или "no".
Параметры Компонента MenuItem
Далее рассмотрим все параметры MenuItem, которые помогут вам создавать настраиваемые и удобные элементы меню.
children
Содержимое кнопки внутри MenuItem. Это может быть текст или любой другой элемент, который будет отображаться в качестве основного текста кнопки.
<MenuItem>Настройки</MenuItem>
Тип: ReactNode
Обязательный: Нет
disabled
Определяет, отключен ли элемент MenuItem. Если disabled установлено в true, то кнопка становится неактивной и не реагирует на клики.
<MenuItem disabled>Элемент отключен</MenuItem>
Тип: boolean
Обязательный: Нет
info
Текстовое описание, которое отображается рядом с основным текстом, чтобы дать пользователю дополнительную информацию.
<MenuItem info="Только для чтения">Документ</MenuItem>
Тип: string
Обязательный: Нет
icon
Определяет иконку для MenuItem, что добавляет визуальный индикатор к элементу меню.
<MenuItem icon="edit">Редактировать</MenuItem>
Тип: string
Обязательный: Нет
iconPosition
Устанавливает положение иконки, указывая, должна ли она отображаться слева или справа от текста. Принимает значения 'left' или 'right'.
<MenuItem icon="trash" iconPosition="left">Удалить</MenuItem>
Тип: string
Обязательный: Нет
По умолчанию: 'right'
isSelected
Определяет, выбран ли элемент меню. Используется для указания на выбранные элементы в меню.
<MenuItem isSelected>Выбранный элемент</MenuItem>
Тип: boolean
Обязательный: Нет
shortcut
Указывает комбинацию клавиш для быстрого доступа к элементу меню. Может быть строкой для отображения текста или объектом, который содержит display и ariaLabel.
<MenuItem shortcut="Ctrl+S">Сохранить</MenuItem>
Тип: string или object
Обязательный: Нет
role
Определяет роль элемента меню для доступности. Принимает значения "menuitem", "menuitemcheckbox" или "menuitemradio" для создания меню с выбором одной или нескольких опций.
<MenuItem role="menuitemradio" isSelected>Радио опция</MenuItem>
Тип: string
Обязательный: Нет
По умолчанию: 'menuitem'
suffix
Позволяет добавлять элементы после основного содержимого, такие как текст или иконки, которые идут после текста элемента.
<MenuItem suffix={<span>New</span>}>Обновить</MenuItem>
Тип: ReactNode
Обязательный: Нет
Пример 1: Простой Элемент Меню с Описанием
Этот MenuItem содержит текст и краткое описание, предоставляя больше контекста для пользователя.
const DescriptiveMenuItem = () => (
<MenuItem info="Доступно только для администраторов">Удалить аккаунт</MenuItem>
);
Пример 2: Элемент Меню с Комбинацией Клавиш
Здесь мы добавляем комбинацию клавиш для быстрого доступа к элементу.
const ShortcutMenuItem = () => (
<MenuItem shortcut="Ctrl+D">Дублировать запись</MenuItem>
);
Пример 3: Элемент с Иконкой и Выбранным Состоянием
В этом примере элемент меню содержит иконку и указывает, что он выбран.
const IconSelectedMenuItem = () => (
<MenuItem icon="star" isSelected>Избранное</MenuItem>
);
Пример 4: Радио Меню с Несколькими Опциями
Здесь создается набор опций MenuItem, где пользователь может выбрать только один элемент.
const RadioMenuExample = () => (
<>
<MenuItem role="menuitemradio" isSelected>Темная тема</MenuItem>
<MenuItem role="menuitemradio">Светлая тема</MenuItem>
</>
);
Пример 5: Элемент Меню с Дополнительной Разметкой через Suffix
Добавление дополнительного текста рядом с элементом меню с помощью suffix.
const SuffixMenuItem = () => (
<MenuItem suffix={<span style={{ color: 'red' }}>Обновлено</span>}>Настройки</MenuItem>
);
Заключение
Компонент MenuItem предоставляет множество возможностей для создания интерактивных, удобных и доступных элементов меню в WordPress. Благодаря поддержке иконок, комбинаций клавиш, состояний выбора и других параметров, MenuItem можно адаптировать для различных ситуаций, делая интерфейс вашего приложения более удобным и интуитивно понятным.