我想向 Angular TabStrip 的 Kendo UI 添加自定义类

Question

<kendo-tabstrip (tabSelect)="onTabSelect($event)">
    <kendo-tabstrip-tab title="Paris" [selected]="true">
        <ng-template kendoTabContent>
            <div class="content">
                <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png"/>
                <h2>17<span>ºC</span></h2>
                <span>Rainy weather in Paris.</span>
            </div>
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

这是我想在其中添加自定义类的第二个选项卡：

添加任何条件

[ngClass]

    <kendo-tabstrip-tab title="New York City">
        <ng-template kendoTabContent>
            <div class="content">
                <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/cloudy.png"/>
                <h2>19<span>ºC</span></h2>
                <span>Cloudy weather in New York City.</span>
            </div>
        </ng-template>
    </kendo-tabstrip-tab>

这是我的代码，我想将自定义类添加到第二个选项卡。我尝试了

[ngclass]

和课程，但它对我不起作用。

Answer 1

TabStripTabComponent

哪个选择器是

kendo-tabstrip-tab

具有

cssClass

属性，它接受与 Angular

ngClass

指令相同的参数。

所以你可以像这样向

kendo-tabstrip-tab

添加 CSS 类：

<kendo-tabstrip-tab title="Paris" [selected]="true" cssClass="my-custom-class">
  <ng-template kendoTabContent>
    <div class="content">
      <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png"/>
      <h2>17<span>ºC</span></h2>
      <span>Rainy weather in Paris.</span>
    </div>
  </ng-template>
</kendo-tabstrip-tab>

或

<kendo-tabstrip-tab title="Paris" [selected]="true" [cssClass]="{'my-custom-class-on-condition': someCondition}">
  <ng-template kendoTabContent>
    <div class="content">
      <img src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png"/>
      <h2>17<span>ºC</span></h2>
      <span>Rainy weather in Paris.</span>
    </div>
  </ng-template>
</kendo-tabstrip-tab>