0

我有以下面板栏：

     <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>具有某些特定类的标签中。

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

4

1 回答 1

6

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 家伙提供的示例：示例

于 2017-04-13T14:02:15.770 回答