Визуальное представление меню опций и контекстного меню

В некоторых случаях конфигурации опции записи, которая задаётся через ItemAction, бывает недостаточно. Поскольку для отображения элементов меню используется Controls/menu:Control, есть возможность установить значения для всех его параметров при помощи опции contextMenuConfig.

Шаблон отображения шапки меню

В опции contextMenuConfig в свойстве headerTemplate можно задать пользовательский шаблон, который отображается в шапке меню опций записи.

В следующем примере задан прикладной шаблон шапки для меню.

Пример
Исходный код
<!-- WML -->
<Controls.list:View source="{{_viewSource}}" itemActions="{{_itemActions}}">
   <ws:contextMenuConfig>
      <ws:headerTemplate>
         <div>
            В шаблоне headerTemplate может быть размещена дополнительная информация
         </div>
      </ws:headerTemplate>
   </ws:contextMenuConfig>
</Controls.list:View>

В опции contextMenuConfig в свойстве footerTemplate можно задать пользовательский шаблон, который отображается в подвале меню опций записи.

В следующем примере задан прикладной шаблон подвала для меню.

Пример
Исходный код
<!-- WML -->
<Controls.list:View source="{{_viewSource}}" itemActions="{{_itemActions}}">
   <ws:contextMenuConfig>
      <ws:footerTemplate>
         <div class="ControlsDemo_MenuFooterTemplate-footer">
            menuFooterText
         </div>
      </ws:footerTemplate>
   </ws:contextMenuConfig>
</Controls.list:View>

Группировка

Элементы меню опций записи можно объединять в группы. Подробнее о группировке читайте здесь.

В следующем примере включена группировка в меню опций записи.

<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   itemActions="{{_itemActions}}">
   <ws:contextMenuConfig groupProperty="itemGroup" />
</Controls.list:View>
// TypeScript
protected _itemActions: IItemAction[];
   
protected _beforeMount(): void {
   this._itemActions = [
      {
         id: 'message',
         icon: 'icon-EmptyMessage',
         showType: 2,
         iconStyle: 'secondary',
         tooltip: 'Написать',
         itemGroup:'Export'
      }
   ]
}

Конфигурация визуального представления группировки задаётся в опции contextMenuConfig в свойстве groupTemplate через настройку шаблона группировки Controls/menu:GroupTemplate.

<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   itemActions="{{_itemActions}}">
   <ws:contextMenuConfig groupProperty="itemGroup">
      <ws:groupTemplate>
         <ws:partial template="Controls/menu:GroupTemplate" showText="{{true}}"/>
      </ws:groupTemplate>
   </ws:contextMenuConfig>
</Controls.list:View>

Размер иконок в меню

В опции contextMenuConfig в свойстве iconSize можно задать размер иконок отображаемых в меню опций и контекстном меню. Это используется для случаев когда иконки меню отличаются по размеру от иконок в опциях записи. Доступные значения: "s", "m", "l".

В следующем примере задан размер иконок, отображаемых в меню опций и контекстном меню.

Пример
Исходный код
<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   itemActions="{{_itemActions}}"
   contextMenuConfig="{{_contextMenuConfig}}">
</Controls.list:View>
// TypeScript 
protected _contextMenuConfig: any = {
    iconSize: 'l'
};