2016-05-16 2 views
1

https://material.angularjs.org/latest/demo/menuアンギュラマテリアルの「md-menu」に対して、どのようにして所定のオフセットを設定できますか?これらのデモでカバーされて、私は角度マテリアルの「MD-メニュー」で働いています

私がやりたいことはいつもあなたがどんなにメニューを表示しないようにクリックするボタンの上のメニューの一番下のオプションを保持しています私が設定した多くのエントリー。余分なエントリごとに、メニューの下部に多分50pxの差を付けて測定しました。

メニューのエントリ数に応じてオフセットを決定し、それをオフセットとして設定する方法はありますか?

そう「0 -50」のは1つのエントリがあることを言わせて、2つのエントリ「0、-100」である、など

この値は、単にいくつかの方法で決定される必要があり、動的に変更されることはありませんページが読み込まれた後。

答えて

2

これはおそらくあなたが探している答えではありませんが、すぐにこの機能が必要なときに、mdPanel機能を待つことができます。それは最後の数日でマスターに合併されたので、それは長いイモではありません。

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要素にこの関数を呼び出すことができ、または何かあなたが本当にしたいと思います。

関連する問題