mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
39951ca99a
#### Refactor: * **Navigation:** Refactored navigation for improved performance, reduce DOM manipulations, increase transition FPS, cached views, smoother transitions, platform specific transitions with added configurable controls for transition animation and direction. * **Cached Views:** Previously as a user navigated an app, each leaving view’s element and scope would be destroyed. If the same view was accessed again then the app would have to recreate the element. Views can now be cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the cycle. When navigating to a view which is already cached, its scope is reconnected, and the existing element which was left in the DOM becomes the active view. This also allows for scroll position of previous views to be maintained (without skippy jumps). Config variables can be used to disable view caching (set to 0), or change the maximum number of views to cache. * **Angular v1.3:** Upgraded Ionic’s to work with Angular v1.3. In general Ionic just works with the upgrade, but the required change was that animations in v1.3 uses promise, whereas in v1.2 animations used callbacks. #### Features: * **Platform Specific Transitions:** Transitions between views now default to the transition style appropriate for each platform. For example, iOS will move forward by transitioning the entering view from right to center, and the leaving view from center to left. However, Android will transition with the entering view going from bottom to center, covering the previous view, which remains stationary. Platform transitions are automatically applied by default, but config variables and custom CSS allows these defaults to be easily overridden. * **Override Transition Type and Direction:** As a user navigates the app, Ionic automatically applies the appropriate transition type for the platform, and the direction the user is navigating. However, both can be overridden in numerous ways: config variable, view attribute, stateProvider property, or attribute on the button/link that initiated the transition. * **enable-menu-with-back-views:** The `enable-menu-with-back-views` attribute determines if the side menu is enabled when the back button is showing. When set to `false`, any buttons/links with the `menuToggle` directive will be hidden, and the user cannot swipe to open the menu. When going back to the root page of the side menu (the page without a back button visible), then any menuToggle buttons will show again, and menus will be enabled again. * **menuClose:** Closes a side menu which is currently opened. Additionally, the menuClose directive will now cause transitions to not animate between views while the menu is being closed. * **ionNavBackButton:** The back button icon and text will automatically update to platform config defaults, such as adjusting to the platform back icon. To take advantage of this, the `ionNavBackButton` directive now should be empty, such as `<ion-nav-back-button></ion-nav-back-button>`. The back button can still be fully customized like it could before, but without any inner content it knows to style using platform configs. * **navBar button primary/secondary sides:** Primary and secondary sides are now the recommended values for the `side` attribute, such as `<ion-nav-buttons side="primary">`. Primary buttons generally map to the left side of the header, and secondary buttons are generally on the right side. However, their exact locations are platform specific. For example, in iOS the primary buttons are on the far left of the header, and secondary buttons are on the far right, with the header title centered between them. For Android however, both groups of buttons are on the far right of the header, with the header title aligned left. Recommendation is to always use `primary` and `secondary` so buttons correctly map to the side familiar to users of a platform. However, in cases where buttons should always be on an exact side, both `left` and `right` sides are still available. * **navDirection:** An attribute directive that sets the direction which the nav view transition should animate. * **navTransition:** An attribute directive that sets the transition type which the nav view transition should use when it animates. Using `none` will disable an animation. #### Breaking Changes: * **Animation CSS:** The CSS for view transitions have changed. This is a breaking change only if Ionic apps had customized Ionic’s animation CSS. * **$ionicPlatformDefaults:** Platform config variables are no longer in the $ionicPlatformDefaults constant, but within `$ionicConfig`. * **$ionicViewService:** In the navigation refactoring, $ionicViewService was split up into two factories, `$ionicViewSwitcher` and `$ionicHistory`. The `$ionicHistory` is largely what `$ionicViewService`, but between the two factories there is a better separation of concerns for improved testing. * **navClear:** The navClear directive was created to do what the new side menu `enable-menu-with-back-views` attribute accomplishes. Additionally, the new `navTransition` and `navDirection` directives are more useful and granular than the navClear directive. * **scrollView.rememberScrollPosition:** This method has been removed since it is no longer needed with cached views. #### Deprecated: * **ionView.title:** The `ionView` directive used the `title` attribute, but this can cause the tooltip to show up on desktop browsers. The `title` attribute will still work for backwards compatibility, but we now recommend using `view-title`, such as `<ion-view view-title=”My Title”>`. * **ionNavView animation attribute removed:** The animation attribute is no longer used for nav views. Instead use `$ionicConfig`. * **ionNavBar animation attribute removed:** The animation attribute is no longer used for nav bars. Instead use `$ionicConfig`.
105 lines
3.4 KiB
JavaScript
105 lines
3.4 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', [
|
|
'$ionicTabsDelegate',
|
|
'$ionicConfig',
|
|
function($ionicTabsDelegate, $ionicConfig) {
|
|
return {
|
|
restrict: 'E',
|
|
scope: true,
|
|
controller: '$ionicTabs',
|
|
compile: function(tElement) {
|
|
//We cannot use regular transclude here because it breaks element.data()
|
|
//inheritance on compile
|
|
var innerElement = jqLite('<div class="tab-nav tabs">');
|
|
innerElement.append(tElement.contents());
|
|
|
|
tElement.append(innerElement)
|
|
.addClass( 'tabs-' + $ionicConfig.tabs.position() )
|
|
.addClass( 'tabs-' + $ionicConfig.tabs.style() );
|
|
|
|
return { pre: prelink, post: postLink };
|
|
function prelink($scope, $element, $attr, tabsCtrl) {
|
|
var deregisterInstance = $ionicTabsDelegate._registerInstance(
|
|
tabsCtrl, $attr.delegateHandle
|
|
);
|
|
|
|
tabsCtrl.$scope = $scope;
|
|
tabsCtrl.$element = $element;
|
|
tabsCtrl.$tabsElement = jqLite($element[0].querySelector('.tabs'));
|
|
|
|
$scope.$watch(function() { return $element[0].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(){
|
|
// variable to inform child tabs that they're all being blown away
|
|
// used so that while destorying an individual tab, each one
|
|
// doesn't select the next tab as the active one, which causes unnecessary
|
|
// loading of tab views when each will eventually all go away anyway
|
|
$scope.$tabsDestroy = true;
|
|
deregisterInstance();
|
|
tabsCtrl.$tabsElement = tabsCtrl.$element = tabsCtrl.$scope = innerElement = null;
|
|
delete $scope.$hasTabs;
|
|
delete $scope.$hasTabsTop;
|
|
});
|
|
}
|
|
|
|
function postLink($scope, $element, $attr, tabsCtrl) {
|
|
if (!tabsCtrl.selectedTab()) {
|
|
// all the tabs have been added
|
|
// but one hasn't been selected yet
|
|
tabsCtrl.select(0);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}]);
|