javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added support for badges in TabBar icons.

Browse Source 
Added support for TabBar icon badges using the attribute badge in the
tab directive.

Ex: <tab icon-on="icon ion-ios7-person" icon-off="icon
ion-ios7-person-outline" href="#/tab/myprofile" badge="3">

I’ve used the colors of the TabBar itself but inverted for the badge. I
don’t know if you’ll want to merge this straight on but I think it can
help as a start point for this feature. I’ve tried to do it as
integrated as possible.
This commit is contained in:
UniRing
2014-01-31 17:36:36 +01:00
parent 8b44004af2
commit 1bd89a86f5
9 changed files with 97 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

@@ -147,6 +147,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
$scope.icon = $attr.icon;
$scope.iconOn = $attr.iconOn;
$scope.iconOff = $attr.iconOff;
$scope.badge = $attr.badge;
$scope.viewSref = $attr.uiSref;
$scope.url = $attr.href;
if($scope.url && $scope.url.indexOf('#') === 0) {
@@ -236,7 +237,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
replace: true,
scope: true,
template: '<div class="tabs">' +
'<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
'<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="{{c.badge}}" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
'</div>',
link: function($scope, $element, $attr, tabsCtrl) {
$element.addClass($scope.tabsType);
@@ -255,6 +256,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
icon: '@',
iconOn: '@',
iconOff: '@',
badge: '@',
active: '=',
tabSelected: '@',
index: '='
@@ -269,7 +271,8 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
};
},
template:
'<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
'<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
'<i class="icon badge" ng-if="badge">{{badge}}</i>' +
'<i class="icon {{icon}}" ng-if="icon"></i>' +
'<i class="{{iconOn}}" ng-if="active"></i>' +
'<i class="{{iconOff}}" ng-if="!active"></i> {{iconTitle}}' +