Angular Material mdTabs - how to get only the effect of tabs animation not the content?

I want to get the animation effect of when someone clicks on the tab and the border below that tab slides to right with the button having a nice ripple effect. I don't want to use the content inside the tab, I just want the tab effect.

mdTabs

As you can see, clicking on the second tab will make the border slide to the right but content will also move to left. I only want tab button sliding to the right as part of my effect. How can I achieve this?

Answers:

Answer

You can use the md-tabs directive without the contents:

var app = angular.module('app', ['ngMaterial']);
app.controller('myController', function($scope) {
  $scope.selectedIndex = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.min.css">

<md-content ng-app="app" ng-controller="myController">
  <md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
    <md-tab label="one"></md-tab>
    <md-tab label="two"></md-tab>
    <md-tab label="three"></md-tab>
  </md-tabs>
  <div layout layout-align="center center">{{ selectedIndex }}</div>
</md-content>

Answer

You can add this in styles

[role="tabpanel"] {
    transition: none;
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.