CODEWITHSUNDEEP
javascriptcssangularjsionic-framework
Oron Bendavid
Oron Bendavid

Reputation: 1533

Ionic V1.3 - tabs - badge-style with condition <ion-tab>

I'm using Ionic and trying to add condition to badge-style inside <ion-tab>

<ion-tab title="style"
         icon-on="icon-payment_home" icon-off="icon-payment_home"
         badge-style="badge-assertive"
         badge="(calculateBadgeValue < 100) ? calculateBadgeValue + '%' : '&#10003'">
    <div class="custom-tab-scroll" ng-include src="'...'"></div>
</ion-tab>

is it possible to add condition for badge-style? I would like to set css class per condition.

thanks in advance

Upvotes: 0

Views: 1618

Answers (2)

manzapanza
manzapanza

Reputation: 6205

Try something like this:

View:

<ion-tab 
  ...
  badge="badge()" 
  badge-style="{{badge() ? 'badge-calm' : 'badge-assertive'}}">
  <ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>

or

<ion-tab 
  ...
  badge="badge()"
  badge-style="{{badgeStyle()}}">
  <ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>

Controller:

$scope.badge = function(){
  return 3;
};
$scope.badgeStyle = function(){
  return 'badge-assertive';
};

CHECK THE DEMO

Upvotes: 1

mlazzje
mlazzje

Reputation: 151

Yes, theoretically you can do it. I advise you to do it in JS (Angular) in order to add your custom class. Don't do it directly in the HTMl file (View).

But, watch out, the attributes for "ion-tab" aren't "badge" and "badge-style" anymore. Now it's "tabBadge" and "tabBadgeStyle".

Source: http://ionicframework.com/docs/v2/api/components/tabs/Tab/

Upvotes: 1

Related Questions