diff --git a/src/components/navBar/demoBasicUsage/index.html b/src/components/navBar/demoBasicUsage/index.html index 62b6b94e6c..73ce032aa6 100644 --- a/src/components/navBar/demoBasicUsage/index.html +++ b/src/components/navBar/demoBasicUsage/index.html @@ -1,6 +1,9 @@
- + + Page One Page Two Page Three @@ -12,4 +15,7 @@
External content for `{{currentNavItem}}`
+ + Disable Ink Bar +
diff --git a/src/components/navBar/navBar.js b/src/components/navBar/navBar.js index ef84583ae8..6d668269f6 100644 --- a/src/components/navBar/navBar.js +++ b/src/components/navBar/navBar.js @@ -36,6 +36,7 @@ angular.module('material.components.navBar', ['material.core']) * * @param {string=} mdSelectedNavItem The name of the current tab; this must * match the name attribute of `` + * @param {boolean=} mdNoInkBar If set to true, the ink bar will be hidden. * @param {string=} navBarAriaLabel An aria-label for the nav-bar * * @usage @@ -101,6 +102,7 @@ function MdNavBar($mdAria, $mdTheming) { bindToController: true, scope: { 'mdSelectedNavItem': '=?', + 'mdNoInkBar': '=?', 'navBarAriaLabel': '@?', }, template: @@ -114,7 +116,7 @@ function MdNavBar($mdAria, $mdTheming) { 'aria-label="{{ctrl.navBarAriaLabel}}">' + '' + '' + - '' + + '' + '
', link: function(scope, element, attrs, ctrl) { $mdTheming(element); @@ -240,7 +242,7 @@ MdNavBarController.prototype._updateInkBarStyles = function(tab, newIndex, oldIn this._inkbar.css({display: newIndex < 0 ? 'none' : ''}); - if(tab){ + if (tab) { var tabEl = tab.getButtonEl(); var left = tabEl.offsetLeft; diff --git a/src/components/navBar/navBar.scss b/src/components/navBar/navBar.scss index c9d3b7fa2a..33e5cba48c 100644 --- a/src/components/navBar/navBar.scss +++ b/src/components/navBar/navBar.scss @@ -58,6 +58,14 @@ md-nav-ink-bar { transition: left $duration $swift-ease-in-out-timing-function, right ($duration * $multiplier) $swift-ease-in-out-timing-function; } + + // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show. + // The ink bar has a transition duration applied, which means, that $ngAnimate delays the hide process. + // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration. + &.ng-animate { + transition: none; + } + } md-nav-extra-content { diff --git a/src/components/navBar/navBar.spec.js b/src/components/navBar/navBar.spec.js index e0e04c706b..bcd6df8bed 100644 --- a/src/components/navBar/navBar.spec.js +++ b/src/components/navBar/navBar.spec.js @@ -33,7 +33,9 @@ describe('mdNavBar', function() { function createTabs() { create( - '' + + '' + ' ' + ' tab1' + ' ' + @@ -173,6 +175,21 @@ describe('mdNavBar', function() { expect(parseInt(getInkbarEl().style.left)) .toBeCloseTo(getTab('tab3')[0].offsetLeft, 0.1); }); + + it('should hide if md-no-ink-bar is enabled', function() { + $scope.noInkBar = false; + $scope.selectedTabRoute = 'tab1'; + + createTabs(); + + expect(getInkbarEl().offsetParent).toBeTruthy(); + + $scope.$apply('noInkBar = true'); + expect(getInkbarEl().offsetParent).not.toBeTruthy(); + + $scope.$apply('noInkBar = false'); + expect(getInkbarEl().offsetParent).toBeTruthy(); + }); }); describe('a11y', function() {