CODEWITHSUNDEEP
cssionic-framework
rayashi
rayashi

Reputation: 1851

How can I insert number in Ionic tabs

I would like to show some pending books in a tab. I want to show a number in ionic tab icon. It is possible?

Like this image.

number in ionic tab 

<ion-tabs class="tabs-striped tabs-dark tabs-background-positive">

  <ion-tab title="Fila" icon-off="ion-ios-people dark" icon-on="ion-ios-people" href="#/tab/queue">
    <ion-nav-view name="tab-queue"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Comissões" icon-off="ion-social-usd-outline dark" icon-on="ion-social-usd-outline" href="#/tab/profit">
    <ion-nav-view name="tab-profit"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Agenda" icon-off="ion-ios-calendar-outline dark" icon-on="ion-ios-calendar-outline" href="#/tab/book">
    <span><number here ??></span>
    <ion-nav-view name="tab-book"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Perfil" icon-off="ion-android-person dark" icon-on="ion-android-person" href="#/tab/profile">
    <ion-nav-view name="tab-profile"></ion-nav-view>
  </ion-tab>
</ion-tabs>

Upvotes: 0

Views: 902

Answers (2)

rayashi
rayashi

Reputation: 1851

I found the solution. Just use badge Attr. Thanks

http://ionicframework.com/docs/api/directive/ionTab/

Upvotes: 2

Florin Pop
Florin Pop

Reputation: 5135

Make your container be position:relative then add position:absolute to the number container ( it could be a p, span, div tag, anything, doesn't matter). Then you can change the top, left, right and bottom property for the number container to position it how you want it.

ion-tab{
  
  position:relative;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  }

ion-tab span {
  position: absolute;
  top: 0;
  right: 0;
  }
    <ion-tab>
        <span>10 </span>
    </ion-tab>

Make sure you add that span tag inside the ion-tab that you want the number to be in.

Upvotes: 1

Related Questions