Badge Icons in Tabs


#1

Does Ionic have any badge components? For example, little notification badges in Tab bars are a very common UI component.

The only reference I see to badges is in the “List” component. It’s just a span with a CSS class class="badge badge-assertive". I tried putting a span inside a tab but had no luck.

Suggestions? Feature?


#2

This is something we talked briefly about while developing/designing the alpha version. I’m thinking it didn’t make the cut, as we were trying to get all the big stuff done and working first. I assume we will have some support for this when we release the Beta.

@adam any thoughts on this?


#3

I’ve just sent a pull request with modifications to support this. https://github.com/driftyco/ionic/pull/502

Hope it helps.


#4

Can i use badge icons in tabs now?


#5

http://ionicframework.com/docs/angularjs/controllers/tab-bar/

Search for “badge”.


#6

em… It works on ion-tab. However, the badge would be a wrong place if i use div class="tab-item"
Code: http://codepen.io/mjhlybmwq/pen/BkoLf


#7

Be sure to add the ‘has-badge’ class to your tab-item element.


#8

Thank you !!! If only there’s a doc about it!


#9

Are there any examples using the JS component? I can’t seem to get the badge attribute to do anything…

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">
    <ion-tab title="Hand Pays" icon="icon ion-ios7-briefcase" ui-sref="dispatch.handpay-index" badge="eventBadge" badge-style="badge-assertive">
        <ion-nav-view name="event-tabs-1"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Paper Jams" icon="icon ion-ios7-printer" ui-sref="dispatch.paperjam-index">
        <ion-nav-view name="event-tabs-2"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Paper Outs" icon="icon ion-document" ui-sref="dispatch.paperout-index">
        <ion-nav-view name="event-tabs-3"></ion-nav-view>
    </ion-tab>
</ion-tabs>

This is in an abstract view without a controller. Do I need to add a controller so $scope.eventBadge has the data I want to appear?


#10

Yes is the answer to that question. Sorry, was thinking out loud here.

Is this how it’s supposed to look?


#11

That’s how mine look. For bigger icons, the badge may overlay them a bit too much. If so, you’ll need to modify the CSS slightly to position them well for your needs.


#12

I am still not able to get it working :frowning:
Example code would be awesome!


#14

Thanks, andy!
You saved my day.