Ionic tabs Badge

Question

I am trying to add a badge on my Icons in the tabs. The current result is: http://play.ionic.io/app/decfc14cb171

Does anyone know how to put them in the top-right corner of each icon?

I tried using but it proved more problematic in other aspects, although with the "badge" attribute is was easier to achieve the desired effect. Is there a way to replicate it without using ion-tabs?

Answer 1

I'd advise using Ionic's ion-tabs directive, as it has "first class" support for badges. The ion-tab element has a "badge" attribute which makes it really easy to add text (in your case a number) to an icon.

I've written a demo of it in action here:

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

The code to add the tags is here:

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

And the result looks like this: