文江博客开发文档 Angular Material 中文教程文章详情

文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

md-menu是一个Angular指令，是在执行的操作上下文中显示添加选项的组件。 md-menu有两个子元素。第一个元素是触发元素，用于打开菜单。第二个元素是md-menu-content ，它表示菜单打开时菜单的内容。 md-menu-content通常将菜单项作为md-menu-item 。

属性 (Attributes)

下表列出了md-menu的不同属性的参数和说明。

Sr.No	参数和描述
1	* md-position-mode 位置模式采用x，y的形式。默认值为target，target。现在x轴也支持目标右。
2	* md-offset 定位x，y后应用于下拉列表的偏移量。默认值为0,0。

Sr.No

参数和描述

* md-position-mode

位置模式采用x，y的形式。默认值为target，target。现在x轴也支持目标右。

* md-offset

定位x，y后应用于下拉列表的偏移量。默认值为0,0。

例子 (Example)

以下示例显示了md-menu指令的使用以及菜单的用法。

am_menus.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('menuController', menuController);
         function menuController ($scope, $mdDialog) {
            var originatorEv;
            this.openMenu = function($mdOpenMenu, ev) {
               originatorEv = ev;
               $mdOpenMenu(ev);
            };
            this.menuItemClick = function(index) {
               $mdDialog.show (
                  $mdDialog.alert()
                    .title('wenjiangs.com')
                    .textContent('Menu Item clicked, index: ' + index)
                    .ok('OK')
                    .targetEvent(originatorEv)
               );
               originatorEv = null;
            };
         }                  
      </script>      
   </head>
   <body ng-app = "firstApplication"> 
      <div id = "menuContainer" ng-controller = "menuController as ctrl"
         layout = "row" ng-cloak>
         <div layout = "column" flex = "33" flex-sm = "100"
            layout-align = "center center">         
            <p>Default Menu</p>
            <md-menu>
               <md-button aria-label = "Sample Menu" class = "md-icon-button"
                  ng-click = "$mdOpenMenu($event)">
                  <md-icon md-menu-origin class = "material-icons">more_vert</md-icon>
               </md-button>
               <md-menu-content width = "6">
                  <md-menu-item ng-repeat = "item in [1, 2, 3]">
                     <md-button ng-click = "ctrl.menuItemClick($index)">
                        <div layout = "row">
                           <md-icon md-menu-align-target class = "material-icons">
                              add</md-icon>
                           <p flex>Option {{item}}</p>
                        </div>
                     </md-button>
                  </md-menu-item>
               </md-menu-content>
            </md-menu>
         </div>
         <div layout = "column" flex-sm = "100" flex = "33" layout-align = "center center">
            <p>Left Aligned Menu</p>
            <md-menu md-position-mode = "target-right target" >
               <md-button aria-label = "Sample Menu" class = "md-icon-button"
                  ng-click = "$mdOpenMenu($event)">
                  <md-icon md-menu-origin class = "material-icons">more_vert</md-icon>
               </md-button>
               <md-menu-content width = "4" >
                  <md-menu-item ng-repeat = "item in [1, 2, 3]">
                     <md-button ng-click = "ctrl.menuItemClick($index)">
                        <div layout = "row">
                           <p flex>Option {{item}}</p>        
                           <md-icon md-menu-align-target class = "material-icons">
                              add</md-icon>					
                        </div>
                     </md-button>
                  </md-menu-item>
               </md-menu-content>
            </md-menu>
         </div>
      </div>
   </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

Menu

属性 (Attributes)

例子 (Example)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。