Angular Material Scaffold

angular-material-scaffold.markdown

Angular Material Scaffold

A Pen by Soham Banerjee on CodePen.

License.

index.html

<div ng-app='app' ng-controller='AppController' layout-fill>
  <div layout='column' layout-fill>
    <md-toolbar>
      <div class='md-toolbar-tools'>
        <md-button class='md-icon-button' ng-click='toggleMenu()' hide-gt-md>
          <md-icon class='material-icons'>menu</md-icon>
        </md-button>
        <h2>My App</h2>
      </div>
    </md-toolbar>
    <div layout='row' flex>
      <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" md-whiteframe="4" layout-padding>
        <div>
        <div layout='column' ng-repeat='link in links'>
          <div layout='row' flex>
            <md-button class='md-icon-button' ng-click='toggleExpanded()'>
              <md-icon ng-show='!link.expanded'>keyboard_arrow_down</md-icon>
              <md-icon ng-show='link.expanded'>keyboard_arrow_up</md-icon>
            </md-button>
            <div>
              <md-button>{{link.text}}</md-button>
              <div class='sub-links slide' ng-if='link.expanded' layout='column'>
                <div ng-repeat='sub in link.links'>
                  <md-button>{{sub.text}}</md-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </md-sidenav>
      <md-content layout-padding flex>
        <div class='bread-crumbs' layout='row'>
          <div ng-repeat='crumb in breadCrumbs' layout='row'>
            <md-button ng-href='#'>{{crumb.text}}</md-button>
            <md-icon ng-if='!$last'>keyboard_arrow_right</md-icon>
          </div>
        </div>
        <div layout-margin>
          <h1>This it the page title</h1>
          <div>
              <md-checkbox ng-model='showContent'>Show Content</md-checkbox>
          </div>
          <div ng-if='showContent' class='slide'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum varius ante, nec bibendum erat ultrices sed. In blandit metus et nibh dapibus, vel imperdiet odio dapibus. Aliquam velit tortor, congue blandit fermentum vitae, varius
            eu lectus. In hac habitasse platea dictumst. Ut quis lobortis quam, sed egestas mi. Sed sed nibh libero. Etiam pharetra id urna ut faucibus. Suspendisse faucibus egestas risus, non vulputate nisl tempus eu. Etiam vestibulum auctor neque ut
            scelerisque. Nunc et ligula vitae nulla volutpat fermentum nec eget magna. Vivamus massa orci, gravida at porta sit amet, maximus at nulla. Ut vestibulum metus sed ante cursus, eget interdum mauris tristique. Sed libero dui, faucibus sit amet
            aliquam et, dignissim sit amet odio. Pellentesque posuere lorem ac dui posuere ornare. Morbi pharetra, lacus vel tristique eleifend, ligula ex posuere velit, non pulvinar magna neque at ligula. Aliquam lobortis lorem vitae tellus dapibus,
            sed eleifend felis tristique. Pellentesque consectetur dui dictum risus ultricies, sit amet consectetur erat elementum. Praesent et tortor rhoncus, dictum eros vitae, efficitur nisl. Quisque eu semper elit, id tempor sapien. Sed a ligula fermentum,
            sagittis ipsum vitae, gravida turpis. Nulla eu pretium velit. Maecenas fermentum sit amet est at ultricies. Donec nec tortor pharetra, commodo dui a, tincidunt mauris. Aliquam maximus varius dui eu euismod. Donec nec est sed dolor lobortis
            ultrices. Suspendisse potenti. Ut ultrices efficitur tellus eget malesuada. Vestibulum libero ipsum, sagittis ut eros ac, elementum vehicula mauris. Praesent luctus ex vel ligula posuere semper. Aliquam sed felis nec odio tempus feugiat vel
            ut lectus. Praesent bibendum lacinia lorem vitae condimentum. Ut at tempor lorem, sit amet ullamcorper dui. Maecenas eu dictum sem. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          </div>
        </div>

      </md-content>
    </div>
  </div>
</div>

script.js

angular.module('app', ['ngMaterial', 'ngAnimate'])
  .controller('AppController', function($scope, $mdSidenav) {
  $scope.showContent = true;
    $scope.breadCrumbs = [];
    $scope.links = [];
    $scope.toggleExpanded = function(){
      this.link.expanded = !this.link.expanded;
    }
    for (var i = 0; i < 3; i++) {
      $scope.breadCrumbs[i] = {
        text: 'Bread Crumb ' + i
      };
    }
    for (var i = 0; i < 5; i++) {
      var mainLink = {
        text: 'Link ' + i,
        links: []
      };
      $scope.links[i] = mainLink;
      for (var j = 0; j < 3; j++) {
        mainLink.links[j] = {
          text: 'Sub Link ' + j
        }
      }
    }
    $scope.toggleMenu = function() {
      $mdSidenav('left').toggle()
    }
  })

  .animation('.slide', function() {
    return {
      enter: function(element, done) {
        //element.css('opacity', 0);
        element.hide().slideDown(done);

        // optional onDone or onCancel callback
        // function to handle any post-animation
        // cleanup operations
        return function(isCancelled) {
          if (isCancelled) {
            element.stop();
          }
        }
      },
      leave: function(element, done) {
        element.show().slideUp(done);

        // optional onDone or onCancel callback
        // function to handle any post-animation
        // cleanup operations
        return function(isCancelled) {
          if (isCancelled) {
            element.stop();
          }
        }
      }
    }
  })
  .config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default').primaryPalette('blue')
  })

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

style.css

md-sidenav .md-button{
  margin:0;
}

.sub-links{
  margin-left:2em;
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" rel="stylesheet" />