自定义 kendo 面板栏项目标题答案

【问题标题】：Customize kendo panelbar item header自定义 kendo 面板栏项目标题
【发布时间】：2017-04-11 08:35:47
【问题描述】：

我有以下面板栏：

     <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），以便更好地控制信息的显示方式？例如，我想将标题包裹在带有特定类的 <span> 标记中。

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

【问题讨论】：

您有任何面板栏下拉菜单吗？还是它们只是按钮？
@mast3rd3mon 有些项目有子项目，如果这是你要问的......
是的，是不是您要自定义的每个顶级按钮/项目组？
@mast3rd3mon 现在是的。但我想如果我想自定义子项，方法会类似。
你希望它是什么样子？

标签： kendo-ui-angular2 kendo-panelbar

【解决方案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

【讨论】：