Angular Material Tabs
home
Run
screen_rotation
fullscreen
cloud_download
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial']) .controller('MyController', function ($scope) { // controller code goes here.. }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController as ctrl" ng-cloak="" > <md-content layout-padding> <md-tabs md-dynamic-height md-border-bottom> <md-tab label="one"> <md-content class="md-padding"> <h1 class="md-display-2">Tab One</h1> <p> Tab One - Dummy Text content for 1.</p> </md-content> </md-tab> <md-tab label="two"> <md-content class="md-padding"> <h1 class="md-display-2">Tab Two</h1> <p> Tab Two - Dummy Text content for 2.</p> </md-content> </md-tab> <md-tab label="three"> <md-content class="md-padding"> <h1 class="md-display-2">Tab Three</h1> <p> Tab Three - Dummy Text content for 3 .</p> </md-content> </md-tab> </md-tabs> </md-content> </div> </body> </html>
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial']) .controller('MyController', function ($scope) { // controller code goes here.. }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController as ctrl" ng-cloak="" > <md-content layout-padding> <md-tabs md-dynamic-height md-border-bottom> <md-tab label="one"> <md-content class="md-padding"> <h1 class="md-display-2">Tab One</h1> <p> Tab One - Dummy Text content for 1.</p> </md-content> </md-tab> <md-tab label="two"> <md-content class="md-padding"> <h1 class="md-display-2">Tab Two</h1> <p> Tab Two - Dummy Text content for 2.</p> </md-content> </md-tab> <md-tab label="three"> <md-content class="md-padding"> <h1 class="md-display-2">Tab Three</h1> <p> Tab Three - Dummy Text content for 3 .</p> </md-content> </md-tab> </md-tabs> </md-content> </div> </body> </html>
Copyrights@tutorialsplane.com