-
-
Save cagodoy/6f45fa30813f95b036a2 to your computer and use it in GitHub Desktop.
Angular-material: Sidebar and content full height example
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 ng-app="your-app" lang="en"> | |
| <head> | |
| <!-- imports title appcache etc --> | |
| </head> | |
| <body layout="column"> | |
| <div layout="row" ng-controller="menuCtrl" flex> | |
| <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-lg')"> | |
| <md-toolbar class="md-medium-tall"> | |
| <span>Toolbar</span> | |
| </md-toolbar> | |
| <md-content layout="column" flex> | |
| <span>Your sidenav</span> | |
| </md-content> | |
| </md-sidenav> | |
| <div layout="column" flex md-theme="green" id="content"> | |
| <md-toolbar layout="row"> | |
| <div class="md-toolbar-tools"> | |
| <!-- Add a toggleMenu function to your menuCtrl controller with the following in it | |
| $mdSidenav('left').toggle(); --> | |
| <i class="fa fa-bars pointer" ng-click="toggleMenu()" hide-gt-lg></i> | |
| <h1 flex>Your App</h1> | |
| </div> | |
| </md-toolbar> | |
| <md-content ui-view layout="column" flex></md-content> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment