在Ionic 3的图标上添加徽章 [英] Add a badge on icon in Ionic 3

问题描述

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

I need to add a number badge to the cart icon in ionic 3 so that the user gets the update of number of elements in the cart without actually visiting the page i tried to use the code of button and badge together but it was of no use

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

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

Above code displays the badge next to the cart icon but not over it, so is there a way to add badge to the icon itself like we have in notification alert badges?

推荐答案

我认为你必须使用一些CSS和绝对定位将徽章放在购物车图标的左上角。

I think you will have to use some CSS and absolute positioning to place the badge above the left corner of the cart icon.

这样的事情：

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

这篇关于在Ionic 3的图标上添加徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！