Ionic V1.3 - вкладки - стиль значка с условием <ion-tab>

Question

Ionic V1.3 - вкладки - стиль значка с условием <ion-tab>

0

Я использую Ionic и пытаюсь добавить условие к знаку стиля внутри <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>

можно ли добавить условие для стиля значка? Я хотел бы установить класс css для каждого условия.

заранее спасибо

Oron Ben-David 15 май 2016, в 09:51

Источник

Теги:

javascript

ionic-framework

angularjs

css

2 ответа

1

Да, теоретически вы можете это сделать. Я советую вам сделать это в JS (Angular), чтобы добавить свой собственный класс. Не делайте этого непосредственно в файле HTMl (View).

Но, следите, атрибуты для " ion-tab " больше не являются "значками" и "значками". Теперь это " tabBadge " и " tabBadgeStyle ".

Источник: http://ionicframework.com/docs/v2/api/components/tabs/Tab/

mlazzje 15 май 2016, в 07:23

0

Спасибо, но я работаю с Ionic version 1, у вас есть решение для этой версии?
Oron Ben-David 15 май 2016, в 09:54
0

Проверьте эту ссылку для Ionic 1: ionicframework.com/docs/v1/api/directive/ionTabs
Ilya Vinogradov 02 июнь 2017, в 17:46

Ещё вопросы

Спасибо, но я работаю с Ionic version 1, у вас есть решение для этой версии?
Проверьте эту ссылку для Ionic 1: ionicframework.com/docs/v1/api/directive/ionTabs

manzapanza · Accepted Answer · 2016-05-15T10-05-00.000Z

Попробуйте что-то вроде этого:

Посмотреть:

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

или

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

контроллер:

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

ПРОВЕРЬТЕ ДЕМО

Спасибо! фигурные скобки были моей проблемой.