角度材料-メニュー

Angularディレクティブである md-menu は、実行されたアクションのコンテキスト内で追加オプションを表示するコンポーネントです。 md-menu には2つの子要素があります。最初の要素はトリガー要素であり、メニューを開くために使用されます。 2番目の要素は md-menu-content で、メニューが開かれたときのメニューのコンテンツを表します。 md-menu-content は通常、メニュー項目を md-menu-item として運びます。

属性

次の表に、 md-menu のさまざまな属性のパラメーターと説明を示します。

Sr.No

Parameter & Description

1

md-position-mode*

x、yの形式の位置モード。デフォルト値はtarget、targetです。現在、x軸はtarget-rightもサポートしています。

2

md-offset*

x、yを配置した後にドロップダウンに適用するオフセット。デフォルト値は0,0です。

例

次の例は、md-menuディレクティブの使用法とメニューの使用法を示しています。

*_am_menus_*

<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('finddevguides.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>

結果

結果を確認します。

Angular-material-menu

目次

角度材料-メニュー

属性

例

結果