Виджет "Кнопка меню" (с поддержкой тем)
Виджет "Кнопка меню" показывает кнопку, открывающую меню со списком элементов, которые можно определить с помощью данных таблицы данных. В зависимости от конфигурации меню можно привязать данные выбранных элементов или события нажатия для каждого пункта меню. Используйте этот виджет, если доступное пространство в компоновке ограничено и требуется скрыть опции, которые используются не часто. Можно создать несколько уровней навигации, чтобы сгруппировать элементы меню под общей меткой.
Стандартная кнопка меню
Кнопка меню с меткой
На следующем изображении показаны доступные варианты кнопки меню слева направо. Можно использовать свойство ButtonType, чтобы задать исполнение кнопки Первичн., Вторичн., Третичн., Опасно! или Прозрачн.. По умолчанию для отображения кнопки используется Третичн..
Анатомия
1. Кнопка меню
2. Меню
3. Меню второго уровня
Выбор направления компоновки
Можно открыть меню, используя горизонтальное или вертикальное направление с помощью свойства MenuDirection.
Вертикально (по умолчанию) - открывает меню под кнопкой. Используйте этот режим, чтобы уменьшить горизонтальное пространство, необходимое для отображения кнопки. Например, когда кнопка отображается на панели инструментов.
Горизонтально - открывает меню сбоку от кнопки. Используйте этот режим, когда кнопка отображается на боковой панели.
Формат данных
Можно создать данные таблицы данных для виджета, используя структуру данных MenuEntry. Дополнительные сведения см. в разделе Использование структуры данных MenuEntry.
На следующем рисунке показан результат таблицы данных, который отображает простое меню, использующее структуру данных MenuEntry.
 | Первая строка таблицы данных используется как корень и не отображается как пункт меню. Необходимо определить пункты меню верхнего уровня с параметром parentMenuId, совпадающим с элементом menuId корня. |
Добавление пользовательских всплывающих подсказок к пунктам меню
Можно отображать всплывающие подсказки для каждого пункта меню, добавив столбцы tooltip и tooltipIcon в данные таблицы данных. На следующем рисунке показана пользовательская всплывающая подсказка для пункта меню.
Конфигурирование данных меню с помощью таблицы данных
1. В Composer создайте сервис, возвращающий данные таблицы данных, определенные с помощью структуры данных MenuEntry. Дополнительные сведения см. в разделе Виджет "Строка меню".
2. В Mashup Builder добавьте сервис меню с помощью панели Данные.
3. Привяжите свойство All Data таблицы данных сервиса к свойству Data виджета "Кнопка меню".
4. Щелкните Сохранить, чтобы сохранить изменения в мэшапе.
Можно также, не используя сервис, определить данные таблицы данных вручную с помощью диалогового окна конфигурации таблицы данных в Mashup Builder.
1. В Mashup Builder выберите виджет "Кнопка меню".
2. На панели Свойства рядом со свойством Data щелкните Добавить. Откроется диалоговое окно, в котором можно добавить строки, чтобы определить данные таблицы данных для виджета.
3. Щелкните Добавить, затем определите данные строки для пункта меню.
4. Щелкните Добавить, чтобы добавить строку в таблицу данных.
5. Щелкните Сохранить, чтобы сохранить данные таблицы данных.
Пункты меню, определенные в таблице данных, отображаются во время выполнения.
Конфигурирование пунктов меню с помощью свойств виджета
По умолчанию виджет сконфигурирован на использование данных таблицы данных для определения пунктов меню. Можно использовать событие SelectedDataChanged и свойство SelectedData сервиса, чтобы передать выбранный элемент в другой сервис. Вместо этого для конфигурирования пунктов меню с помощью свойств виджета используйте свойство ItemConfigurationMode. Если задать для этого свойства значение Свойства виджета, событие и свойства Clicked, которые позволяют настраивать видимость и состояние отключения для каждого пункта меню, добавляются на панель Свойства. Можно привязать эти свойства, чтобы динамически управлять состоянием отдельных пунктов меню на основе конкретных событий в мэшапе. Это позволяет настраивать взаимодействие меню, упрощая управление видимостью и функциональностью каждого пункта меню.
1. В Mashup Builder свяжите источник данных таблицы данных с данными, чтобы определить идентификаторы и метки меню.
2. Выберите виджет "Кнопка меню", а затем на панели Свойства задайте ItemConfigurationMode для Свойства виджета.
3. Сконфигурируйте или привяжите для каждого пункта меню следующие свойства:
◦ <Item_Name>_Clicked - событие, которое инициируется при щелчке по пункту меню.
◦ <Item_Name>_Disabled - отключает пункт меню.
◦ <Item_Name>_Visible - скрывает пункт меню.
4. Щелкните Сохранить.
Стиль кнопки меню
Стиль виджета "Кнопка меню" можно задавать следующими способами:
• На уровне виджета с помощью доступных свойств стиля на панели Свойства стиля.
Можно изменить стили кнопки и меню в любом состоянии, например Отключено или При наведении.
• На уровне темы стиля в разделе >
Дополнительные сведения о настройке тем стиля см. в разделе Настройка тем стилей с помощью вкладки "Стили".
Свойства виджета
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для связывания (<-, ->) | Локализуемое (Д/Н) |
|---|---|---|---|---|---|
Data | Привяжите таблицу данных для определения пунктов меню. Необходимо форматировать таблицы данных, используя структуру данных MenuEntry | INFOTABLE | Д | Н | |
SelectedData | Таблица данных, содержащая данные для последнего выбранного пункта меню. | INFOTABLE | Д | Н | |
SelectedDataChanged | Событие, которое инициируется при выборе пункта меню. | Событие | Д | Н | |
MenuOffset | Расстояние между кнопкой и меню при открытом меню. | NUMBER | 8 | Н | Н |
ButtonType | Задать тип кнопки для кнопки меню. Каждый тип имеет отличающийся стиль. Опции: Первичн., Вторичн. Третичн., Опасно!, Прозрачн. | STRING | Третичн. | Д | Н |
TooltipField | Отображает текст всплывающей подсказки при наведении указателя на виджет кнопки меню. | STRING | Д | Д | |
TooltipIcon | Задает изображение значка для всплывающей подсказки виджета кнопки меню. | MEDIA | Н | Н | |
Disabled | Отключает кнопку меню | BOOLEAN | False | Д | Н |
SVGIcon | Выбор значка SVG для отображения в виджете кнопки меню. Для отображения медиаобъекта используйте свойство значка. | MEDIALINK | Н | Н | |
ButtonIcon | Выберите изображение значка для отображения в виджете кнопки меню. Это свойство переопределяет свойство SVGIcon. | MEDIA | Н | Н | |
ButtonIconPosition | Задайте положение значка слева или справа от метки кнопки. Опции: Слева, Справа | STRING | Справа | Н | Н |
ButtonClicked | Событие, которое инициируется при нажатии кнопки, если для виджета не определены пункты меню. | Событие | Д | Н | |
ButtonMaxWidth | Задать максимальную ширину для кнопки. | NUMBER | Н | Н | |
ButtonLabelAlignment | Выравнивает метку по левому краю, по правому краю или по центру. Опции: По левому краю, По правому краю, По центру | STRING | По центру | Н | Н |
ButtonLabel | Указывает текст метки виджета. | STRING | Д | Д | |
ButtonSize | Задает размер кнопки. Опции: Стандартный, Средний, Большой, Огромный, Заполнить | STRING | Стандартная | Н | Н |
DisplayMenuIcons | Если значение равно false, значки для элементов меню скрыты. | BOOLEAN | False | Н | Н |
AllowMissingIcons | Если задано значение false, а для DisplayMenuIcons задано значение true, значок по умолчанию отображается рядом с пунктами меню без указанного значка в таблице данных. | BOOLEAN | False | Н | Н |
MenuMinWidth | Задайте минимальную ширину меню и подменю в пикселях. Если задано пустое значение, ширина меню соответствует самому широкому элементу. | Число | Н | Н | |
MenuMaxWidth | Задайте максимальную ширину меню и подменю в пикселях. Если задано пустое значение, ширина меню соответствует самому широкому элементу. | Число | Н | Н | |
MenuMaxItems | Задает максимальное число видимых элементов в меню и его подменю. Если данные содержат больше элементов, чем максимум, элементы скрываются в подменю с меткой Дополнительно. | Число | 5 | Д | Н |
MenuDirection | Задает направление, в котором меню открывается относительно кнопки. Опции: Вертикально Горизонтально | STRING | Вертикально | Д | Н |
ItemConfigurationMode | Режим Данные таблицы данных - настройка видимости и состояния каждого пункта меню с использованием данных таблицы данных. Можно использовать событие SelectedDataChanged и свойство SelectedData сервиса, чтобы передать выбранный элемент в другой сервис. Режим Свойства виджета - позволяет конфигурировать видимость и состояние каждого пункта меню вручную, используя свойства виджета, или динамически, используя привязки. Необходимо привязать событие Clicked пунктов меню, чтобы передать свойство SelectedData в другой сервис. Опции: Данные таблицы данных, Свойства виджета | STRING | Данные таблицы данных | Д | Н |
<Item_Name>_Clicked | Событие, которое инициируется при щелчке по пункту меню. | Событие | Д | Н | |
<Item_Name>_Disabled | Отключает элемент меню. | BOOLEAN | True | Д | Н |
<Item_Name>_Visible | Управляет видимостью пункта меню. | BOOLEAN | True | Д | Н |