更改 Ionic 2 中的 TabBadge 不透明度

Posted 2023-03-06

【中文标题】更改 Ionic 2 中的 TabBadge 不透明度

【英文标题】：Change TabBadge opacity in Ionic 2

【发布时间】：2017-05-04 10:55:53

【问题描述】：

在我的项目中，我有一些选项卡，当我的值为 0 时，我想更新 Badge 的样式。但我不知道如何动态更改选项卡的样式。此外，我不知道如何更改样式中徽章的不透明度。

我想要这个结果：

感谢您的帮助！ :)

这是我的代码：

<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>

【参考方案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;
  

【讨论】：

谢谢，但我不使用“离子徽章”应答器。我在 ion-tab 中使用元素“tabBadge”。我会更新我的帖子来解释...

@V.Pivet 我从未在 ion-tab 中使用过“tabBadge”，但动态更新 CSS 的最终逻辑是相同的。

我不明白如何在我的情况下使用 ure 解决方案。我认为这是标签中的另一个逻辑......