-
-
-
-
-
-
-
-
-<!-- <div class="md-menu-demo" ng-controller="PositionDemoCtrl as ctrl" ng-cloak style="min-height:350px;">
- <div class="menu-demo-container" layout-align="start center" layout="column" >
- <div layout-align="start center" layout="column" style="min-height:150px;" >
- <h2 class="md-title">Position Mode Demos</h2>
- <p>The <code>md-position-mode</code> attribute can be used to specify the positioning along the <code>x</code> and <code>y</code> axis.</p>
- <hr/>
- <h3 class="md-subhead">Target-Based Position Modes</h3>
- </div>
- <div class="menus" layout-wrap layout="row" layout-fill layout-align="space-between center" style="min-height:200px;">
- <div layout="column" flex="33" flex-sm="100" layout-align="center center">
- <p>Target Mode Positioning (default)</p>
- <md-menu>
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
- <md-icon md-menu-origin md-svg-icon="call:business"></md-icon>
- </md-button>
- <md-menu-content width="6">
- <md-menu-item ng-repeat="item in [1, 2, 3]">
- <md-button ng-click="ctrl.announceClick($index)">
- <md-icon md-menu-align-target md-svg-icon="call:no-sim"></md-icon>
- Option {{item}}
- </md-button>
- </md-menu-item>
- </md-menu-content>
- </md-menu>
- </div>
- <div layout="column" flex-sm="100" flex="33" layout-align="center center">
- <p>Target mode with <code>md-offset</code></p>
- <md-menu md-offset="0 -5">
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
- <md-icon md-menu-origin md-svg-icon="call:ring-volume"></md-icon>
- </md-button>
- <md-menu-content width="4">
- <md-menu-item ng-repeat="item in [1, 2, 3]">
- <md-button ng-click="ctrl.announceClick($index)"> <span md-menu-align-target>Option</span> {{item}} </md-button>
- </md-menu-item>
- </md-menu-content>
- </md-menu>
- </div>
- <div layout="column" flex-sm="100" flex="33" layout-align="center center">
- <p><code>md-position-mode="target-right target"</code></p>
- <md-menu md-position-mode="target-right target" >
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
- <md-icon md-menu-origin md-svg-icon="call:portable-wifi-off"></md-icon>
- </md-button>
- <md-menu-content width="4" >
- <md-menu-item ng-repeat="item in [1, 2, 3]">
- <md-button ng-click="ctrl.announceClick($index)">
- <div layout="row">
- <p flex>Option {{item}}</p>
- <md-icon md-menu-align-target md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
- </div>
- </md-button>
- </md-menu-item>
- </md-menu-content>
- </md-menu>
- </div>
- </div>
- </div>
- </div>
-</div> -->