CODEWITHSUNDEEP
tabsiconsionic-frameworkbadge
galgo
galgo

Reputation: 764

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?

Upvotes: 14

Views: 19362

Answers (4)

inorganik
inorganik

Reputation: 25525

Here's how to do it in 2022 (Ionic 6.x).

You need to use <ion-badge> in the tab markup:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="dashboard">
      <ion-icon name="home"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="cart">
      <ion-badge color="danger">11</ion-badge>
      <ion-icon name="cart></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Which will give you a result that looks like this:

tabs

Upvotes: 6

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

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

Upvotes: 4

Ari Waisberg
Ari Waisberg

Reputation: 1304

In the latest Ionic doc appears a different way of doing this:

Using the tabBadget and tabBadgetStyle attributes in the tab code, like this:

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

where it says "danger" is the color that you define in the Theme...

Hope it helps the new ones coming to find answer in 2017!

Upvotes: 4

Ben Smith
Ben Smith

Reputation: 20230

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:

Screenshot of ion-tabs with badges

Upvotes: 8

Related Questions