Question

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

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

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

Answer 2

试试这个

模板：

  <div>
        <button id="notification-button" ion-button clear>
            <ion-icon name="notifications">
              <ion-badge id="notifications-badge" color="danger">7</ion-badge>
            </ion-icon>              
        </button>
    </div>

CSS：

  #notification-button {            
            position: relative;
            width: 42px;
            top:1px;
            right: 1px;
            overflow: visible!important;
        }


   #notifications-badge {
            background-color: red;
            position: absolute;
            top: -3px;
            right: -3px;
            border-radius: 100%;
        }

Answer 3

使用最新版本的Ionic（Ionic 4），可以完美地完成工作：

<ion-tabs>

  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-badge color="danger">8</ion-badge>
      <ion-label>profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-badge color="warning">3</ion-badge>
      <ion-label>Market</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

参考：https://www.youtube.com/watch?v=Q6ojtDFOaKA

Answer 4

对于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：在我的情况下，它放在一个离子项目中

preview result

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

4 个答案: