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

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

Answer 1

Telerik的支持帮助了我。

基本上，你只需要：

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

kendoPanelBarItemTitle

以下是一个例子：

<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面板栏项目标题

1 个答案: