Skip to content

Instantly share code, notes, and snippets.

@ololo-psh
Last active August 29, 2015 14:17
Show Gist options
  • Save ololo-psh/549d37b79d0439830b1f to your computer and use it in GitHub Desktop.
Save ololo-psh/549d37b79d0439830b1f to your computer and use it in GitHub Desktop.
ng-material-dumb
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
<span class="visually-hidden">Menu</span>
</button>
<h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment