Компонент ui.system.menu представляет собой выпадающее меню (попап), которое предназначено для отображения списка действий: настройки, дополнительные опции или контекстные команды. Меню может содержать пункты с иконками, подзаголовками, счетчиками, блокировкой, подменю, секциями и расширенным заголовком. Компонент поддерживает использование как в чистом JavaScript, так и во Vue 3 через расширение.

Подключение

import { Menu, MenuItemDesign } from 'ui.system.menu';
const menu = new Menu({
    bindElement: document.getElementById('menu-button'),
    items: [
        {
            title: 'Открыть',
            onClick: () => console.log('Открыто'),
        },
        {
            title: 'Удалить',
            design: MenuItemDesign.Alert,
            onClick: () => console.log('Удалено'),
        },
    ],
});
menu.show();

Использование в Vue 3

Компонент меню можно использовать в Vue 3 приложениях с помощью расширения ui.vue3.components.menu. Доступен компонент BMenu и тип MenuOptions.

import { BMenu, type MenuOptions } from 'ui.vue3.components.menu';

// @vue/component
export const MyComponent = {
    components: {
        BMenu,
    },
    data() {
        return {
            isMenuShown: false,
        };
    },
    computed: {
        menuOptions() {
            return {
                bindElement: this.$refs.button,
                items: [
                    {
                        title: 'Пункт 1',
                        onClick: () => {
                            console.log('Выбран пункт 1');
                        },
                    },
                    {
                        title: 'Подменю',
                        subMenu: {
                            items: [
                                {
                                    title: 'Вложенная опция',
                                    onClick: () => {
                                        console.log('Подменю выбрано');
                                    },
                                },
                            ],
                        },
                    },
                ],
            };
        },
    },
    template: `
        <button ref="button" @click="isMenuShown = true">
            Открыть меню
        </button>
        <BMenu v-if="isMenuShown" :options="menuOptions" @close="isMenuShown = false"/>
    `,
};

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

MenuOptions — основные параметры меню, наследуют PopupOptions из main.popup и расширяют их специфичными полями.

Параметр `тип`	Описание
sections `MenuSectionOptions[]`	Массив секций, по которым группируются пункты меню. Список секций, нужен для отделения групп пунктов друг от друга. Все элементы без секции отрисовываются в начале меню. Секции отделяются разделителем, у которого может быть заголовок.
items `MenuItemOptions[]`	Массив пунктов меню. Каждый пункт может иметь подменю, иконку, счетчик и так далее.
richHeader `RichHeader`	Расширенный заголовок меню с иконкой, названием, подзаголовком и кнопкой.
closeOnItemClick `boolean`	Закрывать ли меню при клике на пункт, если у пункта нет подменю.

MenuItemOptions — параметры отдельного пункта меню.

Параметр `тип`	Описание
id `string`	Уникальный идентификатор пункта.
sectionCode `string`	Код секции, к которой принадлежит пункт.
design `string`	Стилевое оформление пункта.
onClick `Function`	Функция, вызываемая при клике на пункт.
title `string`	Основной текст пункта.
subtitle `string`	Дополнительный текст под заголовком.
badgeText `{title: string, color: string}`	Текст бейджа справа от заголовка.
isSelected `boolean`	Отображать ли галочку выбора слева.
icon `string`	Код иконки слева, из иконок `ui.icon-set`.
svg `SVGElement`	Кастомный SVG-элемент вместо иконки.
extraIcon `object`	Иконка-действие справа, например, звезда.
counter `CounterOptions`	Счетчик справа, из `ui.cnt`.
subMenu `MenuOptions[]`	Подменю, отображается при наведении.
isLocked `boolean`	Показывать значок замка слева.
closeOnSubItemClick `boolean`	Закрывать ли основное меню при клике во вложенном меню.

MenuSectionOptions — параметры секции меню.

Параметр `тип`	Описание
code `string`	Уникальный код секции, используется для группировки пунктов.
title `string`	Заголовок секции, отображается над группой пунктов. Если передать пустым, то секция будет отделена только разделительной чертой.
design `'default' \| 'accent'`	Стиль оформления секции.

RichHeader — параметры богатого заголовка.

Параметр `тип`	Описание
design `'default' \| 'copilot'`	Дизайн заголовка.
title `string`	Текст заголовка.
subtitle `string`	Текст подзаголовка.
icon `string`	Иконка из `ui.icon-set.api.core`.
onClick `function`	Функция, вызываемая при клике на заголовок.

Методы компонента

Класс Menu предоставляет следующие публичные методы:

Метод	Описание	Параметры	Возвращаемое значение
`show(bindElement: HTMLElement): void`	Отображает меню. Если передан `bindElement`, привязывает попап к нему.	`bindElement` — DOM-элемент, к которому привязывается меню	—
`updateItems(itemsOptions: MenuItemOptions[]): void`	Обновляет список пунктов меню. Сохраняет состояние открытых подменю, если это возможно.	`itemsOptions` — новый массив пунктов	—
`close(): void`	Закрывает меню программно.	—	—
`destroy(): void`	Уничтожает меню, удаляет все обработчики и подменю. Вызывается автоматически при закрытии, если установлен `closeByEsc`.	—	—
`getOptions(): MenuOptions`	Возвращает текущие параметры меню.	—	`MenuOptions`
`getPopup(): Popup`	Возвращает внутренний экземпляр `Popup` из `main.popup`.	—	`Popup`
`getPopupContainer(): HTMLElement`	Возвращает контейнер попапа (DOM-элемент).	—	`HTMLElement`

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

Меню с секциями и расширенным заголовком

new BX.UI.System.Menu({
    richHeader: {
        design: 'copilot',
        title: 'AI Assistant',
        subtitle: 'Готов помочь',
        icon: 'main-copilot-ai',
        onClick: () => console.log('Header clicked')
    },
    sections: [
        { code: 'actions', title: 'Действия', design: BX.UI.System.MenuSectionDesign.Accent
 },
        { code: 'settings', title: 'Настройки' }
    ],
    items: [
        {
            title: 'Создать',
            sectionCode: 'actions',
            icon: ‘outline-add-l',
        },
        {
            title: 'Редактировать',
            sectionCode: ‘actions',
        },
        {
            title: 'Темная тема',
            sectionCode: 'settings',
            isSelected: true,
        },
    ],
}).show();

Меню с подменю

new BX.UI.System.Menu({
    items: [
        {
            title: 'Экспорт',
            subMenu: {
                items: [
                    { title: 'PDF', onClick: () => console.log('PDF') },
                    { title: 'Excel', onClick: () => console.log('Excel') },
                ],
            },
        },
        {
            title: 'Удалить',
            design: BX.UI.System.MenuItemDesign.Alert,
            onClick: () => confirm(‘Удалить?'),
        },
    ],
}).show();