Customize Material Angular menu

Asked

Viewed 315 times

0

I need to put a margin in this menu when clicked, I want below the button, have to 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

1 answer

1


Just set the attribute md-offset="x y", which is the pixel setting of the offset 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>

Browser other questions tagged css angular-material

You are not signed in. Login or sign up in order to post.