Question

我试图创建一个通知栏，当它被点击时显示在铃铛图标的左下方。

这里可以看到一个例子：http://wrapbootstrap.com/preview/WB011H985

我尝试给它一个特定的margin-top（140px），但当你向下滚动一点然后点击铃声时，通知显示的方式太低了。

HTML

<div class="md-menu-demo menudemoMenuPositionModes" ng-controller="PositionDemoCtrl as ctrl" ng-cloak="" style="min-height:350px;" ng-app="MyApp">
  <div class="menu-demo-container" layout-align="start center" layout="column">
    <div class="menus" layout-wrap="" layout="row" layout-fill="" layout-align="space-between center" style="min-height:200px;">
      <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="">
          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
            <img ng-src="https://cdn4.iconfinder.com/data/icons/unigrid-flat-basic/90/019_025_bell_ring_alarm_notice_notification_notify-32.png">
          </md-button>
          <md-menu-content width="6">
            <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-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>

CSS

.menudemoMenuPositionModes .md-menu-demo {
  padding: 24px; }

.menudemoMenuPositionModes .menu-demo-container {
  min-height: 200px; }

#menu_container_0 {
  background-color:red;
  margin-top:140px;
}

的JavaScript

angular
  .module('MyApp',['ngMaterial', 'ngMessages'])
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
      .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
  })
  .controller('PositionDemoCtrl', function DemoCtrl($mdDialog) {
    var originatorEv;

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

    this.announceClick = function(index) {
      $mdDialog.show(
        $mdDialog.alert()
          .title('You clicked!')
          .textContent('You clicked the menu item at index ' + index)
          .ok('Nice')
          .targetEvent(originatorEv)
      );
      originatorEv = null;
    };
  });

Answer 1

为菜单容器添加绝对定位...

就你的例子而言，像这样：

#menu_container_0 {
  background-color:red;
  position: absolute;
  margin-top:140px;
}

http://codepen.io/anon/pen/VeWgvq

角度材质菜单位置（通知栏）

1 个答案: