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() {