在 Ionic 3 中的图标上添加徽章

Question

我需要在 ionic 3 中的购物车图标中添加一个数字徽章，以便用户在不实际访问页面的情况下获取购物车中元素数量的更新我尝试一起使用按钮和徽章的代码但它没有用

  <button ion-button icon-only (click)="cart()">
      <ion-icon name="cart"> <ion-badge item-end>260k</ion-badge></ion-icon>
  </button>

上面的代码显示了购物车图标旁边的徽章，但没有显示在它上面，那么有没有办法像我们在通知警报徽章中那样将徽章添加到图标本身？

原文由 OshoParth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您将不得不使用一些 CSS 和绝对定位将徽章放置在购物车图标的左角上方。

像这样的东西：

 <button id="cart-btn" ion-button icon-only (click)="cart()">
      <ion-icon name="cart"></ion-icon>
      <ion-badge id="cart-badge">260k</ion-badge>
</button>

CSS

 #cart-btn {
   position: relative;
}

#cart-badge {
   position: absolute;
   top: 0px;
   right: 0px;
}

原文由 Jack Vial 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于 ionic 5，这对我来说非常有用：

 <ion-buttons slot="start" (click)="whateverYouWant()">
    <ion-icon slot="start" name="mail"></ion-icon>
    <ion-badge color="danger" style="position: absolute; right: -5px; top: -3px;">3
    </ion-badge>
</ion-buttons>

PS：在我的情况下，它被放置在一个 ion-item 中

预览结果

原文由 user14267037 发布，翻译遵循 CC BY-SA 4.0 许可协议