Skip to content

Instantly share code, notes, and snippets.

@ThomasBurleson

ThomasBurleson/sideNavDemo.html

Created March 1, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasBurleson/da0a32c7f235fc2f0d61 to your computer and use it in GitHub Desktop.
Save ThomasBurleson/da0a32c7f235fc2f0d61 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstration of how the SideNav component requires the Angular Material app to be defined/used.
Raw
sideNavDemo.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Material Test</title>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css"/>
</head>
<body layout="column" ng-app="starterApp">
<md-toolbar layout="row">
<span>Main App Bar</span>
</md-toolbar>
<div layout="row" flex>
<!-- sideNav is hidden by default; so lock open if space allows -->
<md-sidenav md-is-locked-open="$media('gt-sm')" class="md-whiteframe-z2">
Side Nav
</md-sidenav>
<md-content flex>Main Content</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.min.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script>
// !! Note: Sidebar will not layout correctly UNLESS the Angular Material app defined/used.
angular.module('starterApp', ['ngMaterial']);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment