An example of angular material design layout with a collapsible sidenav.
Created
March 16, 2015 13:50
-
-
Save srdone/bc776c1f03e4d3bf41b9 to your computer and use it in GitHub Desktop.
Basic Angular Material Design Layout With Sidenav
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css" /> | |
| <!-- Angular Material Dependencies --> | |
| <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.5/angular-aria.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script> | |
| <script src="script.js"></script> | |
| </head> | |
| <!-- Use 'layout' to specify a row or column layout for div elements --> | |
| <body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="row"> | |
| <md-sidenav | |
| md-component-id="left" | |
| md-is-locked-open="$mdMedia('gt-md')" | |
| layout="column" | |
| class="md-sidenav-left md-whiteframe-z3"> | |
| <md-toolbar layout-align="center center"> | |
| Sidenav Header | |
| </md-toolbar> | |
| <md-content layout="column"> | |
| <md-button ng-click="close()" hide-gt-md> | |
| Close Sidenav | |
| </md-button> | |
| <md-button ng-repeat="item in items" ng-click="notifyClicked(item)"> | |
| {{item}} | |
| </md-button> | |
| </md-content> | |
| </md-sidenav> | |
| <div layout="column"> | |
| <md-toolbar layout="row" layout-align="start center"> | |
| <md-button ng-click="open()" hide-gt-md> | |
| <md-icon md-svg-src="https://google.github.io/material-design-icons/navigation/svg/ic_menu_24px.svg"></md-icon> | |
| </md-button> | |
| <div flex layout-margin>Main Toolbar Stuff</div> | |
| </md-toolbar> | |
| <md-content layout-margin> | |
| <h3>An example of Angular Material</h3> | |
| <p ng-repeat="item in items"> | |
| This is a much longer paragraph. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip | |
| ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </md-content> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app = angular.module('materialDesignApp', ['ngMaterial', 'ngAria']); | |
| app.controller('MainCtrl', function($scope, $mdSidenav, $mdToast) { | |
| $scope.items = function () { | |
| var items = []; | |
| for (i = 0; i < 20; i++) { | |
| items.push('item ' + i); | |
| } | |
| return items; | |
| }(); | |
| $scope.notifyClicked = function (x) { | |
| $mdToast.showSimple(x + ' clicked'); | |
| }; | |
| $scope.close = function () { | |
| $mdSidenav('left').close().then(function () { | |
| $mdToast.showSimple('Sidenav Closed'); | |
| }); | |
| }; | |
| $scope.open = function () { | |
| $mdSidenav('left').open().then(function () { | |
| $mdToast.showSimple('Sidenav Opened'); | |
| }); | |
| }; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment