Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular Material Tabs with UI-Router

Angular Material Tabs with UI-Router

This demonstration shows how Angular-Material Tabs can be used with Angular-UI-Router

A Pen by Dustin Ko on CodePen.

License.

<div class="intro">
This demonstration shows how Angular-Material Tabs can be used with Angular-UI-Router
<div>
<div ng-app="dsntApp"
ng-controller="tabCtrl"
layout="column" class="demo" >
<script type="text/ng-template" id="partials/view1.html"> Tab #1 </script>
<script type="text/ng-template" id="partials/view2.html"> Tab #2 </script>
<script type="text/ng-template" id="partials/view3.html"> Tab #3 </script>
<md-toolbar>
<h2 class="md-toolbar-tools">
<span>Toolbar</span>
</h2>
</md-toolbar>
<md-tabs md-stretch-tabs
md-selected="selectedIndex">
<md-tab label="tab1"></md-tab>
<md-tab label="tab2"></md-tab>
<md-tab label="tab3"></md-tab>
</md-tabs>
<div id="content" ui-view flex> </div>
</div>
(function(angular, undefined) {
"use strict";
angular.module('dsntApp', ['ngMaterial', "ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/tab/dash');
$stateProvider
.state('view1', {
url: "/view1",
templateUrl: "partials/view1.html"
})
.state('view2', {
url: "/view2",
templateUrl: "partials/view2.html"
})
.state('view3', {
url: "/view3",
templateUrl: "partials/view3.html"
})
;
})
.controller('tabCtrl', function($scope, $location, $log) {
$scope.selectedIndex = 0;
$scope.$watch('selectedIndex', function(current, old) {
switch (current) {
case 0:
$location.url("/view1");
break;
case 1:
$location.url("/view2");
break;
case 2:
$location.url("/view3");
break;
}
});
});
})(angular);
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-aria.js"></script>
<script src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
.intro {
position: absolute;
left: 30px;
top: 20px;
width: 600px;
height: 20px;
font-size : 12px;
}
.demo {
position: relative;
width: 600px;
height: 300px;
background-color: #cccccc;
margin-top: 40px;
margin-left: 0px;
}
.demo #content {
background-color: rgb(255, 255, 255);
padding: 30px;
font-weight: 600;
border: 1px solid #999999;
border-top: none;
}
<link href="http://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.