Search code examples
tabsiconsionic-frameworkbadge

Ionic tabs Badge

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?

Solution

  • [ works only for ioinc 1 ]

    See this: http://play.ionic.io/app/52586f24b84d
    You need to make a class with relative position

    .badge-container{
      position: relative;
}

    And assign it to <i> tag this way, badge will be automatically adjusted

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

    Same goes for other tab 

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

    Now you can change further position of badge also by giving margin etc to span with badge.