Ionic-framework: Badge on ion-tab

[mhartington]

_From @mauricionarcizo on January 12, 2016 15:46_

How I can add badge on ion-tab?

_Copied from original issue: driftyco/ionic2#935_

[mhartington]

_From @ivks on January 17, 2016 11:41_

+1. Looking for an answer to this question.
@mauricionarcizo One Suggestion:
In case you are not using tabTitle, in tabs. Use it as a badge and style the .tab-button-text class to make it look like one.

[brandyscarney]

This is now possible using the following markup (tabBadgeStyle is optional):

<ion-tab tabTitle="Location" tabIcon="navigate" tabBadge="11" tabBadgeStyle="secondary"></ion-tab>

Tried to keep naming consistent with tabIcon and tabTitle. Let me know if you don't like this. @adamdbradley @mhartington

[mauricionarcizo]

Thank you!

[brandyscarney]

Forgot to check dynamic values. :smile: Can be passed like this:

myBadge:number = 55;

or this:

myBadge:string = "55";

and then on the tab:

<ion-tab tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>

Examples here:
https://github.com/driftyco/ionic/blob/master/src/components/tabs/test/badges/main.html
https://github.com/driftyco/ionic/blob/master/src/components/tabs/test/badges/app-module.ts

[ghaliano]

IS there any chance to have two badges ?

[mhartington]

This will not be supported. As the design from both platforms do not allow multiple badges to be displayed on the same component

[RonnieToupal]

any easy was to hide badge if its 0?

[marticrespi]

@RonnieToupal

tabBadge="{{ numItems > 0 ? numItems : '' }}"

[mdanics]

@brandyscarney any way to have an ios styled badge on android?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.