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

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

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