Ionique onglets Badge

Je suis en train d'ajouter un badge sur mes Icônes dans les onglets.
Le résultat actuel est: http://play.ionic.io/app/decfc14cb171

Personne ne sait comment les mettre dans le coin en haut à droite de chaque icône?

J'ai essayé d'utiliser mais il s'est avéré plus problématique dans d'autres aspects, bien qu'avec le "badge" attribut est était plus facile d'obtenir l'effet désiré. Est-il un moyen de le reproduire sans l'aide d'ions onglets?

laissez-moi savoir si ma réponse vous aide.

OriginalL'auteur galgo | 2015-09-04

  1. 3

    [ ne fonctionne que pour les ioinc 1 ]

    Voir ceci: http://play.ionic.io/app/52586f24b84d

    Vous avez besoin de faire une classe avec position relative

    .badge-container{
      position: relative;
}

    Et de l'attribuer à <i> balise de cette façon, le badge sera automatiquement ajusté

    <i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>

    En va de même pour les autres onglet 

    <i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>

    Maintenant, vous pouvez changer la position du badge en leur donnant de la marge etc span avec badge.

    Merci! Exactement c'était que je cherchais!
    Super! Cela a fonctionné pour moi. Merci

    OriginalL'auteur Mudasser Ajaz

  2. 8

    Je conseille d'utiliser Ionique du ion-onglets directive, comme elle l'a "de première classe" soutien pour les badges. Le ion-onglet de l'élément a un "badge" attribut qui le rend vraiment facile d'ajouter du texte (dans votre cas, un certain nombre) à une icône.

    J'ai écrit une démo en action ici:

    http://play.ionic.io/app/c6e96276e8fd

    Le code pour ajouter les balises est ici:

    <ion-tabs class="tabs-icon-top tabs-striped">

 <ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="3" badge style="badge-assertive">
   <ion-nav-view name="home-tab"></ion-nav-view>
 </ion-tab>

 <ion-tab title="About" icon=" ion-ios-paper" href="#/tab/about" badge="5" badge-style="badge-assertive">
   <ion-nav-view name="about-tab"></ion-nav-view>
 </ion-tab>

</ion-tabs>

    Et le résultat ressemble à ceci:

    Ionique onglets Badge

    Comme je l'ai écrit, j'ai essayé d'ions onglets. Le problème est que parfois, j'ai envie de cacher l'ensemble de la barre d'onglet basée sur une expression et je ne peux pas avec les ions des onglets. La façon que j'ai mon code fonctionne, j'ai juste ne peut pas obtenir le même résultat avec le badge.
    Pourquoi ne pouvez-vous pas afficher/masquer les ions barre d'onglets? Voir ici pour un exemple jouer.ionique.io/app/8e4426a8eb18
    cette solution n'est pas plus de travail... j'ai posté une autre solution est de travailler en 2017/2018

    OriginalL'auteur Ben Smith

  3. 3

    Dans la dernière Ionique doc apparaît une autre façon de faire:

    À l'aide de la tabBadget et tabBadgetStyle attributs dans l'onglet code, comme ceci:

     <ion-tabs>
      <ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
    </ion-tabs>

    où il est dit "danger" est la couleur que vous définissez dans le Thème...

    Espère que cela aide les nouveaux à venir trouver la réponse en 2017!

    OriginalL'auteur AriWais