Item: Md-menu try
Rating: 3.4
Author: 1kohei1

0 Downloads
51 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Md-menu try</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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 dropdown 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>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu()">
        <md-icon md-menu-origin="" md-svg-icon="call:phone"></md-icon>
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button ng-click="ctrl.redial($event)">
            <md-icon md-svg-icon="call:dialpad" md-menu-align-target=""></md-icon>
            Redial
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
            <md-icon md-svg-icon="call:voicemail"></md-icon>
            Check voicemail
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>
        <md-menu-item>
          <md-button ng-click="ctrl.toggleNotifications()">
            <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
            {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>

    <md-menu>
      <div ng-click="$mdOpenMenu()">SAMPLE</div>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button>Option 1</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>Option 2</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>Option 3</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>Option 4</md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
  </div>
</div>
  <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='https://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>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/1kohei1/md-menu-try-WvXGGW */
.menudemoBasicUsage .md-menu-demo {
  padding: 24px; }
.menudemoBasicUsage .menu-demo-container {
  min-height: 200px; }


/*Downloaded from https://www.codeseek.co/1kohei1/md-menu-try-WvXGGW */
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.
  };
}

Comments

More from 1kohei1

Md-menu try

In this example below you will see how to do a Md-menu try with some HTML / CSS and Javascript

Technologies

Comments

More from 1kohei1

SVG.js playground

RxJS playground

RxJS drag capture drag complete

Observable connect

You Might Also Like

TIC TAC TOE

Challenge 117 - Testimonial Page

[flex] 08-2

Vocab Cat

A Pen by Chris Hartmann

ReactJS Playground

Par ou Impar

Text Editor (with 3 synced panes… markdown, html, visual)