Question

在我的项目中，我有一些标签，我希望在我的值为0时更新徽章的样式。但我不知道如何动态更改标签的样式。此外，我不知道如何改变我的徽章的不透明度。

我希望得到这样的结果：

感谢您的帮助！ :)

有我的代码：

<ion-tabs color="secondary"  (ionChange)="changeTabs()">
  <ion-tab [root]="tab1" tabTitle="tab1" tabBadge="{{this.session.getToDoCount()}}" tabBadgeStyle="notif"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="tab2" tabBadge="{{this.session.getToComeCount()}}" tabBadgeStyle="notif"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="tab3"></ion-tab>
</ion-tabs>

Answer 1

如果徽章值为零，则必须使用ngClass指令应用自定义样式。

<强> HTML：

<ion-item class="messages">
  <ion-icon name="logo-twitter" item-left></ion-icon>
  Followers
  <ion-badge class="message" item-right [ngClass]="{'me': badgeValue === 0}">260k</ion-badge>
</ion-item>

<强>样式：

.messages {
  .message {
     background: #387ef5;
     color: #fff;
  }
  .message.me {
    background: #fff;
  }
}

在Ionic 2中更改TabBadge不透明度

1 个答案: