Шаблон отображения элемента

Для отображения элементов панели по умолчанию используется базовый шаблон wml!NavigationPanels/SideMenu/template/itemTemplate. Изменяя параметры базового шаблона, можно задать собственного отображение элемента. Для изменения параметров шаблона используют опции itemTemplate и itemTemplateProperty.

В следующем примере показано, как с помощью itemTemplateProperty для конкретного элемента меню задать собственный шаблон отображения.

<NavigationPanels.sideMenu:View
   itemTemplateProperty="uniqueItemTemplate"
   source="{{_source}}"
   bind:selectedKey="_selectedKey"
   keyProperty="id"/>
export default class Base extends Control {
    protected _template: TemplateFunction = template;
    protected _selectedKey: string = 'Home';
    protected _source: Memory = new Memory({
        keyProperty: 'id',
        data: [
            ...
            }, {
               id: 'Afternoon tea',
               title: 'Afternoon tea',
               uniqueItemTemplate: 'wml!NavigationPanels-demo/ScrollViewer/Options/SideMenu/ItemTemplate/templates/uniqueTemplate'
            }
        ]
    });
}
<!-- wml!NavigationPanels-demo/ScrollViewer/Options/SideMenu/ItemTemplate/templates/uniqueTemplate -->
<div class="engineDemo-SideMenu__itemTemplate ws-flexbox ws-align-items-center">
    <div class="controls-text-secondary_theme-{{_options.theme}} controls-fontsize-l_theme-{{_options.theme}}">
        Profile
    </div>
    <Controls.buttons:Button
        attr:class="engineDemo-SideMenu__itemTemplate-button"
        viewMode="functionalButton"
        iconStyle="contrast"
        iconSize="s"
        icon="icon-Client2"
        inlineHeight="l"/>
</div>

С помощью свойства элемента additionalContentTemplateName можно указать путь до шаблона, который будет отрисовываться под пунктом меню:

...
protected _source: Memory = new Memory({
    keyProperty: 'id',
    data: [{
     ...
        {
          id: 'Menus',
          title: 'Menus',
          additionalContentTemplateName:
          'wml!NavigationPanels-demo/ScrollViewer/Options/SideMenu/ItemTemplate/templates/additionalContentTemplate'
          }
     ...
    }]
...

C помощью свойства элемента counter можно задать подпись справа от пункта навигационного меню.

...
{
    id: 'Sunday lunch',
    title: 'Sunday lunch',
    counter: '50$'
}, 
...