Basic Usage

Basic Usage.markdown

Basic Usage

A Pen by Katakam pavan kumar on CodePen.

License.

index.html

<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-app="MyApp">

  <div class="menu-demo-container" layout-align="center center" layout="column">
    <h2 class="md-title">Simple fhdxfgdg menu</h2>
    <p>Note that applying the <code>md-menu-origin</code> and <code>md-menu-align-target</code> attributes ensure that the menu elements align</p>
    <md-menu>
      <div ng-click="$mdOpenMenu()" layout="row">
        <img src="http://lorempixel.com/400/200/" width="50" height="50" style="border-radius:50%" alt="" />
        <div style="padding-left:5px">
          <div class="md-title">Name</div>
          <small>(Relation)</small>
        </div>
      </div>

      <md-menu-content >
        <md-menu-item>
          <div layout="row">
            <img src="http://lorempixel.com/400/200/" width="50" height="50" style="border-radius:50%" alt="" />
            <div style="padding-left:5px">
              <div class="md-title">Name</div>
              <small>(Relation)</small>
            </div>
          </div>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>
        <md-menu-item>
          <div layout="row">
            <img src="http://lorempixel.com/400/200/" width="50" height="50" style="border-radius:50%" alt="" />
            <div style="padding-left:5px">
              <div class="md-title">Name</div>
              <small>(Relation)</small>
            </div>
          </div>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>
        <md-menu-item>
          <div layout="row">
            <img src="http://lorempixel.com/400/200/" width="50" height="50" style="border-radius:50%" alt="" />
            <div style="padding-left:5px">
              <div class="md-title">Name</div>
              <small>(Relation)</small>
            </div>
        </md-menu-item>

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

script.js

angular.module('MyApp')
.config(function($mdIconProvider) {
  $mdIconProvider
    .iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
    .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
})
.controller('BasicDemoCtrl', DemoCtrl);

function DemoCtrl($mdDialog) {
  var vm = this;
  vm.notificationsEnabled = true;
  vm.toggleNotifications = function() {
    vm.notificationsEnabled = !vm.notificationsEnabled;
  };

  vm.redial = function(e) {
    $mdDialog.show(
      $mdDialog.alert()
        .title('Suddenly, a redial')
        .content('You just called someone back. They told you the most amazing story that has ever been told. Have a cookie.')
        .ok('That was easy')
    );
  };

  vm.checkVoicemail = function() {
    // This never happens.
  };
}

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

style.css

.menudemoBasicUsage .md-menu-demo {
  padding: 24px; }
.menudemoBasicUsage .menu-demo-container {
  min-height: 200px; }

styles

<link href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" rel="stylesheet" />