web-dev-qa-db-fra.com

Ajouter un badge sur l'icône dans Ionic 3

Je dois ajouter un badge numérique à l'icône du panier dans ionic 3 afin que l'utilisateur obtienne la mise à jour du nombre d'éléments dans le panier sans réellement visiter la page, j'ai essayé d'utiliser le code du bouton et un badge ensemble, mais cela ne servait à rien

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

Le code ci-dessus affiche le badge à côté de l'icône du panier mais pas au-dessus, alors existe-t-il un moyen d'ajouter un badge à l'icône elle-même comme nous l'avons dans les badges d'alerte de notification?

cssionic-frameworksassionic2ionic3
7
OshoParth

Je pense que vous devrez utiliser du CSS et un positionnement absolu pour placer le badge au-dessus du coin gauche de l'icône du panier.

Quelque chose comme ça:

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

Essaye celui-là

Modèle:

  <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%;
        }
3
mawahidvga

Avec la dernière version de Ionic (Ionic 4), cela fait parfaitement l'affaire:

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

Référence: https://www.youtube.com/watch?v=Q6ojtDFOaKA

0
CJ42