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

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

АтрибутТипОбязательныйОписание
classStringНетУкажите название класса CSS, используемого в поле CSS виджета.
sizeStringДа

Выберите размеры выпадающего меню из предложенных преднастроенных опций:

  • "" (значение не указано) = 464px
  • "middle" = 344px
  • "low" = 224px
eventsStringДа

Укажите, какие действия необходимо выполнить после того, как выбран один из преднастроенных шаблонов:

  • click
  • context
  • mouseOver
isShowBooleanНетУстановите значение атрибута true для отображения меню. Значение по умолчанию: false.
doCloseFunctionНетОпределите дополнительное действие при закрытии меню. Укажите в значении атрибута пользовательский метод s_widget_custom, созданный в клиентском скрипте.
modelStringДаУкажите ссылку на динамическую переменную, хранящую элементы меню и действия.

Примеры:

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

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

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

Свойство объекта

Тип

Описание

event_to_displayArray of Strings

Укажите событие, открывающее секцию меню. Возможные значения: 

  • ['mouseover'] – пользователь наводит указатель на секцию.
  • ['click'] – пользователь нажимает на секцию.
eventsObject

Укажите событие, вызываемое при взаимодействии с элементом меню. Возможные значения:

  • "click": "runScript()" – при клике на элемент меню вызывается скрипт.
  • "mouseover" : "runScript()" – при наведении указателя на элемент меню вызывается скрипт.
sectionsArrayУкажите список секций меню. 
orderNumberУкажите порядок секций. Секции с более низким значением расположены выше в меню. 
elementsArrayУкажите список элементов секции. 
titleStringУкажите заголовок элемента. 
child_elementsArrayУкажите дочерние элементы текущего элемента. 
decorationObjectЗадайте структуру 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.

Рекомендованные значения: 'transparent', '#E52600', '#0086E5'

Значение по умолчанию: 'transparent'

Вы можете использовать любые другие HEX-коды цветов. Однако рекомендуется использовать цвета, указанные выше, так как они соответствуют дизайну платформы.

borderRadiusУкажите скругление фона лейбла text. 

Рекомендованные значения: '4px' (прямоугольник со слегка скругленными краями), '24px'/'50%' (круг/овал, в зависимости от количества символов в лейбле text)

Значение по умолчанию: '0'

Значение для скругления можно задать в пикселях или процентах.

Пример серверного скрипта виджета с настройкой декора 
;(() => {
    data.menu = {
        "menu": {
            "size": "middle",
            "event_to_display": ["click"],
            "events": {},
            "sections": [
                {
                    title: 'All',
                    order: 1,
                    event_to_display: ['mouseover'],
                    events: {},
                    decoration: {
                        text: '🎁',
                        hint: '',
                        color: '',
                        backgroundColor: 'transparent',
                        borderRadius: '0',
                    },
                    child_elements: [],
                },
            ]
        }
    }
})();

  • No labels

© 2019-2024, SimpleOne

https://simpleone.ru