Используйте тег <dropdownMenu> для создания многоуровневого выпадающего меню.
Атрибуты
Доступные атрибуты:
Атрибут | Тип | Обязательный | Описание |
---|---|---|---|
class | String | Нет | Укажите название класса CSS, используемого в поле CSS виджета. |
size | String | Да | Выберите размеры выпадающего меню из предложенных преднастроенных опций:
|
events | String | Да | Укажите, какие действия необходимо выполнить после того, как выбран один из преднастроенных шаблонов:
|
isShow | Boolean | Нет | Установите значение атрибута true для отображения меню. Значение по умолчанию: false. |
doClose | Function | Нет | Определите дополнительное действие при закрытии меню. Укажите в значении атрибута пользовательский метод s_widget_custom, созданный в клиентском скрипте. |
model | String | Да | Укажите ссылку на динамическую переменную, хранящую элементы меню и действия. |
Примеры:
<dropdownMenu model="data.menu"></dropdownMenu>
Шаблон из примера отображает три точки , открывающие меню.
Структура меню
Структура меню должна быть описана в серверном скрипте. Доступные свойства объекта menu:
Свойство объекта | Тип | Описание |
---|---|---|
event_to_display | Array of Strings | Укажите событие, открывающее секцию меню. Возможные значения:
|
events | Object | Укажите событие, вызываемое при взаимодействии с элементом меню. Возможные значения:
|
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. | Рекомендованные значения: '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