Customize Angular Material Menu

Question

Customize Angular Material Menu

Navigation

#1 by (1 votes)

0

I need to put a margin in this menu when clicked, I want under the button, can you use a hierarchy to not affect the original classes of the component?

angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])  
  
  .controller('BasicDemoCtrl', function DemoCtrl($mdDialog) {

    this.openMenu = function($mdMenu, ev) {
      originatorEv = ev;
      $mdMenu.open(ev);
    }; 

  });

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

<md-menu>
    <md-button ng-click="ctrl.openMenu($mdMenu, $event)">
      BT
    </md-button>
    <md-menu-content>
    Conteúdo...
    </md-menu-content>
 </md-menu>
 </div>


<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css'>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js'></script>

css angular-material

asked by anonymous 13.03.2017 / 21:23

1 answer

Add field to standard laravel 5.3 log form Error in the codeigniter's querier builder

score 1 · Accepted Answer

Just define the attribute md-offset="x y" , which is the definition in pixels of the offset from where the menu will be:

angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])  
  
  .controller('BasicDemoCtrl', function DemoCtrl($mdDialog) {

    this.openMenu = function($mdMenu, ev) {
      originatorEv = ev;
      $mdMenu.open(ev);
    }; 

  });

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

<md-menu md-offset="40 40">
    <md-button ng-click="ctrl.openMenu($mdMenu, $event)">
      BT
    </md-button>
    <md-menu-content>
    Conteúdo...
    </md-menu-content>
 </md-menu>
 </div>


<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css'>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js'></script>