mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionTabs
|
|
* @module ionic
|
|
* @delegate ionic.service:$ionicTabsDelegate
|
|
* @restrict E
|
|
* @codepen KbrzJ
|
|
*
|
|
* @description
|
|
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed
|
|
* through.
|
|
*
|
|
* Assign any [tabs class](/docs/components#tabs) or
|
|
* [animation class](/docs/components#animation) to the element to define
|
|
* its look and feel.
|
|
*
|
|
* See the {@link ionic.directive:ionTab} directive's documentation for more details on
|
|
* individual tabs.
|
|
*
|
|
* Note: do not place ion-tabs inside of an ion-content element; it has been known to cause a
|
|
* certain CSS bug.
|
|
*
|
|
* @usage
|
|
* ```html
|
|
* <ion-tabs class="tabs-positive tabs-icon-only">
|
|
*
|
|
* <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
|
|
* <!-- Tab 1 content -->
|
|
* </ion-tab>
|
|
*
|
|
* <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
|
|
* <!-- Tab 2 content -->
|
|
* </ion-tab>
|
|
*
|
|
* <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
|
|
* <!-- Tab 3 content -->
|
|
* </ion-tab>
|
|
*
|
|
* </ion-tabs>
|
|
* ```
|
|
*
|
|
* @param {string=} delegate-handle The handle used to identify these tabs
|
|
* with {@link ionic.service:$ionicTabsDelegate}.
|
|
*/
|
|
|
|
IonicModule
|
|
.directive('ionTabs', [
|
|
'$ionicViewService',
|
|
'$ionicTabsDelegate',
|
|
function($ionicViewService, $ionicTabsDelegate) {
|
|
return {
|
|
restrict: 'E',
|
|
scope: true,
|
|
controller: '$ionicTabs',
|
|
compile: function(element, attr) {
|
|
element.addClass('view');
|
|
//We cannot use regular transclude here because it breaks element.data()
|
|
//inheritance on compile
|
|
var innerElement = jqLite('<div class="tabs"></div>');
|
|
innerElement.append(element.contents());
|
|
element.append(innerElement);
|
|
|
|
return { pre: prelink };
|
|
function prelink($scope, $element, $attr, tabsCtrl) {
|
|
var deregisterInstance = $ionicTabsDelegate._registerInstance(
|
|
tabsCtrl, $attr.delegateHandle
|
|
);
|
|
|
|
$scope.$on('$destroy', deregisterInstance);
|
|
|
|
tabsCtrl.$scope = $scope;
|
|
tabsCtrl.$element = $element;
|
|
tabsCtrl.$tabsElement = jqLite($element[0].querySelector('.tabs'));
|
|
|
|
var el = $element[0];
|
|
$scope.$watch(function() { return el.className; }, function(value) {
|
|
var isTabsTop = value.indexOf('tabs-top') !== -1;
|
|
var isHidden = value.indexOf('tabs-item-hide') !== -1;
|
|
$scope.$hasTabs = !isTabsTop && !isHidden;
|
|
$scope.$hasTabsTop = isTabsTop && !isHidden;
|
|
});
|
|
$scope.$on('$destroy', function() {
|
|
delete $scope.$hasTabs;
|
|
delete $scope.$hasTabsTop;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
}]);
|