dropdownMenu
Используйте тег <dropdownMenu> для создания многоуровневого выпадающего меню.
Атрибуты
Доступные атрибуты:
Атрибут | Тип | Обязательно | Описание |
---|---|---|---|
class | String | Нет | Укажите название класса CSS, используемого в поле CSS виджета. |
size | String | Да | Выберите размеры выпадающего меню из предложенных преднастроенных опций:
|
events | String | Да | Укажите, какие действия необходимо выполнить после того, как выбран один из преднастроенных шаблонов:
|
isShow | Boolean | Нет | Установите значение атрибута true для отображения меню. Значение по умолчанию: false. |
doClose | Function | Нет | Определите дополнительное действие при закрытии меню. Укажите в значении атрибута пользовательский метод s_widget_custom, созданный в клиентском скрипте. |
model | String | Да | Укажите ссылку на динамическую переменную, хранящую элементы меню и действия. |
Пример:
dropdownMenu
<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. | Рекомендованные значения: '#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: [],
},
]
}
}
})();