Кнопка с меню

Кнопка, при клике по которой открывается выпадающий список.

Документация API Спецификация Axure

Конфигурация

Конфигурация кнопки описана в документе Кнопки и ссылки.

Конфигурация набора элементов для выпадающего меню описана в документе Конфигурация набора элементов для выпадающих списков.

Событие выбора элемента меню

Для кнопки Controls/dropdown:Button интересующее событие — menuItemActivate. В обработчик события вторым аргументом приходит Types/entity:Record с данными элемента меню.

Например, в обработчике выведем на экран значение поля "title":

• JS-модуль:

define('Module/Component',
   [
      'Core/Control', 
      'wml!Module/Component', 
      'Types/source'
   ],
   function(
      Control, 
      template, 
      source
   ){
      return Control.extend({
         _template: template,
         _menuItems: null,
         _beforeMount: function() {
            this._menuItems = new source.Memory({
                keyProperty: 'id',
                data: [
                {
                   id: '1',
                   title: 'Запись 1',
                },
                {
                   id: '4',
                   title: 'Запись 4',
                },
                {
                   id: '5',
                   title: 'Запись 5',
                }]
            }) 
         },
         _clickItemsChangedHandler: function(event, rec) {
             
            // При клике по элементу с id=5 покажет диалог со строкой "Запись 5".
            alert(rec.get('title'));
         }
      })
});

• WML:

<Controls.dropdown:Button source="{{_menuItems}}" on:menuItemActivate="_clickItemsChangedHandler()" />