md-tab

this example for md-tabs with all supported directive.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>md-tab</title>
  
  
  
  
  
</head>

<body>
  <html>
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">
  </head>
  <body ng-app="myApp" ng-controller="MyController">
    
    <h1 align="center">MD-TAB Example</h1>
    
    <md-tabs>
      <md-tab md-on-select="tabSelected()">
        <md-tab-label>
          <span>TAB 1</span>
          </md-tab-label>
        <md-tab-body layout-padding="true">
          <h3>Hello From Tab 1</h3>
          </md-tab-body>
        </md-tab>
      <md-tab md-on-deselect="tabDeselect()">
        <md-tab-label>
          <span>TAB 2</span>
          </md-tab-label>
        <md-tab-body layout-padding="true">
          <h3>Hello From Tab 2</h3>
          </md-tab-body>
        </md-tab>
      
      <md-tab>
        <md-tab-label>
          <span>TAB 3</span>
          </md-tab-label>
        <md-tab-body layout-padding="true">
          <h3>Hello From Tab 3</h3>
          </md-tab-body>
        </md-tab>
        
      </md-tabs>
    
    </section>
         <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
  </body>
</html>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
/* Downloaded from https://www.codeseek.co/ */
var app = angular.module('myApp', ['ngMaterial']);

app.controller('MyController',function($scope){
  $scope.tabSelected=function(){
    console.log("Tab Select");
  };
  
  $scope.tabDeselect=function(){
    console.log("Tab Deselect");
  }
})

This awesome code ( md-tab ) is write by Chetan Bhadra, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Chetan Bhadra