Angular Material Layout

by Rafa Ola

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="menuBarDemoBasic">
  <div ng-controller="DemoBasicCtrl as demo">
    <md-toolbar class="md-menu-toolbar">
      <div layout="row">
        <md-toolbar-filler layout layout-align="center center">
          <md-icon md-svg-icon="call:chat"></md-icon>
        </md-toolbar-filler>
        <div>
          <h2 class="md-toolbar-tools">Untitled document</h2>
          <md-menu-bar>
            <md-menu>
              <button ng-click="$mdMenu.open()">
                File
              </button>
              <md-menu-content>
                <md-menu-item>
                  <md-button ng-click="demo.sampleAction('share', $event)">
                    Share...
                  </md-button>
                </md-menu-item>

              </md-menu-content>

            </md-menu>

          </md-menu-bar>
        </div>
      </div>
    </md-toolbar>
  </div>
</div>

CSS

html,
body,
row {
  background: #eee;
}

JavaScript

angular
  .module('menuBarDemoBasic', ['ngMaterial'])
  .controller('DemoBasicCtrl', function DemoCtrl($mdDialog) {
    this.sampleAction = function(name, ev) {
      $mdDialog.show($mdDialog.alert()
        .title(name)
        .textContent('You triggered the "' + name + '" action')
        .ok('Great')
        .targetEvent(ev)
      );
    };
  });