dropdownMenu

Используйте тег <dropdownMenu> для создания многоуровневого выпадающего меню.

Атрибуты

---

Доступные атрибуты:

Атрибут	Тип	Обязательно	Описание
class	String	Нет	Укажите название класса CSS, используемого в поле CSS виджета.
size	String	Да	Выберите размеры выпадающего меню из предложенных преднастроенных опций: "" (значение не указано) = 464px "middle" = 344px "low" = 224px
events	String	Да	Укажите, какие действия необходимо выполнить после того, как выбран один из преднастроенных шаблонов: click context mouseOver
isShow	Boolean	Нет	Установите значение атрибута true для отображения меню. Значение по умолчанию: false.
doClose	Function	Нет	Определите дополнительное действие при закрытии меню. Укажите в значении атрибута пользовательский метод s_widget_custom, созданный в клиентском скрипте.
model	String	Да	Укажите ссылку на динамическую переменную, хранящую элементы меню и действия.

Пример:

dropdownMenu

<dropdownMenu model="data.menu"></dropdownMenu>

Шаблон из примера отображает три точки , открывающие меню.

Структура меню

---

Структура меню должна быть описана в серверном скрипте. Доступные свойства объекта menu:

Свойство объекта	Тип	Описание
event_to_display	Array of Strings	Укажите событие, открывающее секцию меню. Возможные значения: ['mouseover'] – пользователь наводит указатель на секцию. ['click'] – пользователь нажимает на секцию.
events	Object	Укажите событие, вызываемое при взаимодействии с элементом меню. Возможные значения: "click": "runScript()" – при клике на элемент меню вызывается скрипт. "mouseover" : "runScript()" – при наведении указателя на элемент меню вызывается скрипт.
sections	Array	Укажите список секций меню.
order	Number	Укажите порядок секций. Секции с более низким значением расположены выше в меню.
elements	Array	Укажите список элементов секции.
title	String	Укажите заголовок элемента.
child_elements	Array	Укажите дочерние элементы текущего элемента.
decoration	Object	Задайте структуру decoration.

Пример серверного скрипта виджета с настройкой структуры меню

; (() => {
    data.menu = {
        "menu": {
    "size": "low",
    "event_to_display": [
        "click"
    ],
    "sections": [
        {
            "order": "1",
            "elements": [
                {
                    "title": "Text",
                    "order": "1",
                    "event_to_display": ["click"],
                    "events": {
                        "click": "runScript()"
                    },
                    "child_elements": [
                        {
                            "title": "Text22",
                            "event_to_display": ["click"],
                            "events": {
                                "click": "runScript()"
                            },
                            "child_elements": [
                            {
                            "title": "Text2",
                            "event_to_display": ["click"],
                            "events": {
                                "click": "runScript()"
                            },
                            "child_elements": []
                        }
                            ]
                        }
                    ]
                },
                {
                    "title": "Title",
                    "order": "2",
                    "event_to_display": ["click"],
                    "events": {
                        "click": "runScript()"
                    },
                    "child_elements": [
                        {
                            "title": "Text2",
                            "event_to_display": ["click"],
                            "events": {
                                "click": "runScript()"
                            },
                            "child_elements": []
                        }
                    ]
                }
            ]
        },
        {
            "order": "2",
            "elements": [
                {
                    "title": "Text",
                    "order": "1",
                    "event_to_display": ["click"],
                    "events": {
                        "click": "runScript()"
                    },
                    "child_elements": []
                }
            ]
        }
    ]
}
    }
})();

Декор

---

Вы можете добавлять декор для секций dropdownMenu. Доступные свойства объекта decoration:

Свойство объекта	Тип	Возможные значения
text	Укажите лейбл, который будет отображаться справа от названия элемента в выпадающем меню.	Любые символы, включая эмодзи. Максимальное количество = 3
hint	Укажите подсказку, которая появляется при наведении курсора на элемент.	Любые символы, максимального ограничения нет. Значение по умолчанию = не задано
color	Укажите цвет текста лейбла text.	Рекомендованные значения: '#ABB1BA', '#ffffff' Значение по умолчанию: '#ffffff' Вы можете использовать любые другие HEX-коды цветов. Однако рекомендуется использовать цвета, указанные выше, так как они соответствуют дизайну платформы.
backgroundColor	Укажите цвет фона лейбла text.	Рекомендованные значения: '#E52600', '#0086E5' Значение по умолчанию: 'transparent' Вы можете использовать любые другие HEX-коды цветов. Однако рекомендуется использовать цвета, указанные выше, так как они соответствуют дизайну платформы.
borderRadius	Укажите скругление фона лейбла text.	Рекомендованные значения: '4px' (прямоугольник со слегка скругленными краями), '24px'/'50%' (круг/овал, в зависимости от количества символов в лейбле text) Значение по умолчанию: '0' Значение для скругления можно задать в пикселях или процентах.

Пример серверного скрипта виджета с настройкой декора

;(() => {
    data.menu = {
        "menu": {
            "size": "middle",
            "event_to_display": ["click"],
            "events": {},
            "sections": [
                {
                    title: 'Все',
                    order: 1,
                    event_to_display: ['mouseover'],
                    events: {},
                    decoration: {
                        text: '🎁',
                        hint: '',
                        color: '',
                        backgroundColor: 'transparent',
                        borderRadius: '0',
                    },
                    child_elements: [],
                },
            ]
        }
    }
})();