Badge Icons in Tabs

ionic-v1
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.

1 Like
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.