Компонент ToolbarDropdownMenu в WordPress: Подробное руководство с примерами

Главная - WordPress Codex - Компонент ToolbarDropdownMenu в WordPress: Подробное руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент ToolbarDropdownMenu в WordPress предназначен для добавления действий в панель инструментов. Его обычно используют внутри Toolbar или ToolbarGroup для создания интерфейсов общего назначения. Если компонент применяется для добавления пользовательских элементов управления в блок, лучше использовать его в сочетании с BlockControls.

ToolbarDropdownMenu позволяет поддерживать взаимодействие с клавиатурой в соответствии со стандартом WAI-ARIA для панели инструментов. Это делает его удобным и доступным для всех пользователей.

Пример базового использования

Для начала рассмотрим, как создать интерфейс с ToolbarDropdownMenu, где он встроен в Toolbar и выводит набор направлений (вверх, вправо, вниз, влево).

import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
import { more, arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';

function MyToolbarExample() {
    return (
        <Toolbar label="Опции">
            <ToolbarDropdownMenu
                icon={more}
                label="Выберите направление"
                controls={[
                    {
                        title: 'Вверх',
                        icon: arrowUp,
                        onClick: () => console.log('Вверх'),
                    },
                    {
                        title: 'Вправо',
                        icon: arrowRight,
                        onClick: () => console.log('Вправо'),
                    },
                    {
                        title: 'Вниз',
                        icon: arrowDown,
                        onClick: () => console.log('Вниз'),
                    },
                    {
                        title: 'Влево',
                        icon: arrowLeft,
                        onClick: () => console.log('Влево'),
                    },
                ]}
            />
        </Toolbar>
    );
}

Параметры компонента ToolbarDropdownMenu

Рассмотрим свойства ToolbarDropdownMenu, которые позволяют управлять его настройкой и поведением:

СвойствоТипОписание
iconReactNodeИконка для меню, которая отображается рядом с раскрывающимся меню.
labelstringТекст метки, объясняющий назначение кнопки.
controlsArray<Object>Массив объектов, описывающих элементы управления. Каждый объект должен содержать title, icon и onClick.
popoverPropsObjectДополнительные свойства для всплывающего окна.

Свойство controls

Свойство controls представляет собой массив объектов, каждый из которых описывает отдельный элемент управления. В каждом объекте могут быть следующие параметры:

  • title — Название, отображаемое в меню.
  • icon — Иконка для элемента управления.
  • onClick — Функция, вызываемая при клике на элемент.

Пример с настройкой действий в панели блока

Компонент ToolbarDropdownMenu можно использовать в BlockControls для создания действий, специфичных для пользовательского блока. Например, добавим те же направления для панели блока:

import { BlockControls } from '@wordpress/block-editor';
import { ToolbarDropdownMenu } from '@wordpress/components';
import { more, arrowUp, arrowRight, arrowDown, arrowLeft } from '@wordpress/icons';

function EditToolbarExample() {
    return (
        <BlockControls group="block">
            <ToolbarDropdownMenu
                icon={more}
                label="Направления"
                controls={[
                    {
                        title: 'Вверх',
                        icon: arrowUp,
                        onClick: () => console.log('Выбрано Вверх'),
                    },
                    {
                        title: 'Вправо',
                        icon: arrowRight,
                        onClick: () => console.log('Выбрано Вправо'),
                    },
                    {
                        title: 'Вниз',
                        icon: arrowDown,
                        onClick: () => console.log('Выбрано Вниз'),
                    },
                    {
                        title: 'Влево',
                        icon: arrowLeft,
                        onClick: () => console.log('Выбрано Влево'),
                    },
                ]}
            />
        </BlockControls>
    );
}

В этом примере:

  • Мы используем BlockControls, чтобы добавить действия в панель блока.
  • controls содержит четыре действия, и каждое действие логирует название направления при выборе.

Использование popoverProps для настройки всплывающего окна

Свойство popoverProps позволяет передавать дополнительные параметры для всплывающего окна меню. Например, можно изменить положение всплывающего окна.

import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
import { more, arrowUp, arrowRight, arrowDown, arrowLeft } from '@wordpress/icons';

function CustomPopoverExample() {
    return (
        <Toolbar label="Инструменты">
            <ToolbarDropdownMenu
                icon={more}
                label="Выбор действия"
                popoverProps={{ position: 'bottom right' }}
                controls={[
                    {
                        title: 'Вверх',
                        icon: arrowUp,
                        onClick: () => console.log('Выбрано действие: Вверх'),
                    },
                    {
                        title: 'Вправо',
                        icon: arrowRight,
                        onClick: () => console.log('Выбрано действие: Вправо'),
                    },
                    {
                        title: 'Вниз',
                        icon: arrowDown,
                        onClick: () => console.log('Выбрано действие: Вниз'),
                    },
                    {
                        title: 'Влево',
                        icon: arrowLeft,
                        onClick: () => console.log('Выбрано действие: Влево'),
                    },
                ]}
            />
        </Toolbar>
    );
}

В данном примере:

  • popoverProps включает параметр position: 'bottom right', что изменяет позицию всплывающего окна.

Заключение

Компонент ToolbarDropdownMenu предоставляет гибкие возможности для добавления действий в панель инструментов. Его можно использовать как в Toolbar, так и в BlockControls, что делает его универсальным инструментом для настройки интерфейсов WordPress. С помощью параметров icon, label, controls и popoverProps вы можете создавать адаптируемые меню, улучшая пользовательский интерфейс.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg