如何为 Angular Material 的 "md-menu" 设置预定偏移量？

Question

我正在使用 Angular Material 的 "md-menu"，如这些演示中所述：https://material.angularjs.org/latest/demo/menu

我想做的是无论我设置了多少条目，都将菜单的底部选项始终保持在您单击以显示菜单的按钮上方。我测量了每个额外条目的菜单底部可能有 50 像素的差异。

有没有办法根据菜单中的条目数确定偏移量并将其设置为偏移量？

假设 1 个条目是“0, -50”，2 个条目是“0, -100”，等等

这个值只是需要通过某种方法来确定，不会在页面加载后动态改变。

Answer 1

这可能不是您正在寻找的答案，但根据您需要该功能的时间，您可以等待 mdPanel 功能。这几天已经合并到master了，所以应该不会那么长吧

mdPanel 的优点在于您可以轻松地随意放置它。您可以在此处查看基础知识：https://github.com/angular/material/blob/master/src/components/panel/panel.js#L465-L497

我还没有检查 mdMenu 是否已经基于 mdPanel 进行了重新设置（可能还没有），但是你可以创建你的菜单mdPanel 无论如何。这是一个基本示例：

vm.menu = function () {
    var position = $mdPanel.newPanelPosition()
        .relativeTo(document.querySelector('#menu'))
        .addPanelPosition($mdPanel.xPosition.ALIGN_START, $mdPanel.yPosition.ALIGN_BOTTOMS);

    var config = {
        templateUrl: 'widgets/menu.html',
        hasBackdrop: false,
        position: position,
        clickOutsideToClose: true,
        escapeToClose: true,
        focusOnOpen: true,
        controller: MenuController,
        controllerAs: 'vm'
    };
    $mdPanel.open(config);
}

您可以在简单的 mdButton 元素或您真正想要的任何元素上调用此函数。

如何为 Angular Material 的 "md-menu" 设置预定偏移量？

How can I set a predetermined offset for Angular Material's "md-menu"?

javascript

angularjs

angular-material