自定义 kendo 面板栏项目 header

Question

我有以下面板：

     <kendo-panelbar *ngIf="mainMenu" 
        [expandMode]="expandMode">
        <kendo-panelbar-item [title]="menuItem.title" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
          [routerLink]="menuItem.link" routerLinkActive="active">
            <kendo-panelbar-item [title]="menuItemSub.title" *ngFor="let menuItemSub of menuItem.sub" 
            [routerLink]="menuItemSub.link" routerLinkActive="active">
            </kendo-panelbar-item>
        </kendo-panelbar-item>
      </kendo-panelbar>

生成的项目示例如下：

    <kendo-panelbar-item routerlinkactive="active" tabindex="0" ng-reflect-router-link="/dashboard-edge" 
ng-reflect-router-link-active="active" ng-reflect-title="Dashboard Edge" 
ng-reflect-icon-class="fa fa-lg fa-window-maximize" role="treeitem" 
class="k-item k-state-default " id="k-panelbar-item-default-1" aria-selected="false">
    <span class="k-link k-header">
        <!--bindings={"ng-reflect-ng-if": "fa fa-lg fa-window-maximize"}-->
        <span class="k-icon fa fa-lg fa-window-maximize" ng-reflect-klass="k-icon" 
        ng-reflect-ng-class="[object Object]">
        </span>
        <!--bindings={"ng-reflect-ng-if": ""}-->
        Dashboard Edge
        <!--bindings={}-->
        <!--bindings={"ng-reflect-ng-if": "false"}-->
    </span>
<!--bindings={"ng-reflect-ng-if": "false"}-->
</kendo-panelbar-item>

如何自定义项目的内容（使用 HTML）以便更好地控制信息的显示方式？例如，我想将标题包裹在带有一些特定 class.

的 <span> 标签中

我可以使用模板自定义内容，但不能 header 本身。

Answer 1

Telerik 支持帮助我解决了这个问题。

基本上，您只需要：

将 null 传递给 [title] 绑定
并使用 kendoPanelBarItemTitle 指令创建 ng-template

这是一个例子：

<kendo-panelbar *ngIf="mainMenu" 
        [expandMode]="expandMode">
        <kendo-panelbar-item [title]="null" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
          [routerLink]="menuItem.link" routerLinkActive="active" [attr.name]="menuItem.name">
            <ng-template kendoPanelBarItemTitle>
                <span class="item-title">{{menuItem.title}}</span>
            </ng-template>
            <kendo-panelbar-item [title]="null" *ngFor="let menuItemSub of menuItem.sub" 
            [routerLink]="menuItemSub.link" routerLinkActive="active" [attr.name]="menuItemSub.name">
            <ng-template kendoPanelBarItemTitle>
                <span class="sub item-title">{{menuItemSub.title}}</span>
            </ng-template>
            </kendo-panelbar-item>
        </kendo-panelbar-item>
      </kendo-panelbar>

Telerik 人员提供的示例：example

自定义 kendo 面板栏项目 header

Customize kendo panelbar item header

kendo-panelbar

kendo-ui-angular2