如何定位相對於按鈕的角度材質面板對話框？

根據discussion at Github，不能定位standard dialog（api），但可以定位panel dialogs（api）。如何定位相對於按鈕的角度材質面板對話框？

甲simplified demo表明，這是真實的：

var position = this._mdPanel.newPanelPosition().bottom(0).right(0);

的Angular Material docs示出了方法，其允許相對於所述點擊的元素的定位（或任何傳入）。然而，我無法得到這個工作。

var target = el.target; 
var position = this._mdPanel.newPanelPosition().relativeTo(target);

在.top()和.right()硬值傳遞，例如，允許相對於視定位。不過，我無法獲得相對於點擊元素的定位。這應該如何工作？

來源

2016-08-15 isherwood

過去幾個月來我一直在使用Angular Material，但仍然發現缺少文檔，所以請原諒本文的篇幅，作爲我在該問題上的僞文檔。但這裏是我知道的：

我只能夠得到的面板位置的工作，相對於目標元素，通過級聯addPanelPosition功能到relativeTo功能，例如：

var position = this._mdPanel 
    .newPanelPosition() 
    .relativeTo(ev.target) 
    .addPanelPosition('align-start', 'below') // or other values

（在這種情況下，ev是NG-點擊通過$事件對象）

我能夠追查可接受的參數addPanelPosition，他們有以下幾種：

面板y位置只接受以下值： center |對齊| align-bottoms |以上|低於

面板x位置只接受以下值：中心| align-start | align-end | offset-start |偏移結束

Interstingly不夠，在角材質的演示，他們使用的this._mdPanel.xPosition.ALIGN_START和this._mdPanel.yPosition.BELOW特性，這只是解決成字符串的X和Y值的addPanelPosition功能。我總是直接用字符串值。但是，如果此功能的開發仍在不斷變化，並且它們會更改可接受的字符串值，則使用字符串值可能會產生問題。

我會指出一個我見過的問題。

他們在演示中使用的另一個技巧是在relativeTo函數中指定類名稱而不是目標元素，然後將該類放置在目標元素本身上。這種方法會有所幫助的原因是，ng-click中的$ event對象可以根據點擊的內容提供不同的目標元素。例如，單擊按鈕<div>將給出與單擊按鈕內的<span>文本不同的目標。這將導致你的面板轉移位置，除非你提供了額外的功能不這樣做。

Codepen

我把他們的演示，真正把它砍下來的大小來關注這個問題。你可以看到更新的codepen here

來源

2016-08-19 23:21:55

對話框是非常簡單的小部件。誘捕焦點是關於他們所做的最複雜的事情。我很擔心你的問題已演變成如此複雜的問題。

只是爲了說明這一點，您完全可以控制定位任何單個對話，這要感謝您配置的類名稱。

.demo-dialog-example { 
    top: 20px; 
    left: 20px; 
}

另外，在您的showDialog方法中，爲什麼不通過承諾爲open方法設置回調？喜歡的東西：

this._mdPanel.open(config).then(function() { 
    var dialog = angular.element(document.querySelector('.demo-dialog-example')); 
    //Centering, positioning relative to target, or draggable logic goes here 
});

我尊重你正試圖改善插件的邏輯和做事的「角辦法」，但這些相對簡單的要求不應該給你造成這麼多的心痛。

來源

2016-08-26 13:41:32

我同意，但恐怕固定CSS的定位不是一個理想的解決方案。我讀過的內容表明，定位可以動態發生。 – isherwood

當我發表評論時，here你可以看到它工作在一個笨蛋。

我的解決方案非常接近@我認爲我可以編碼的答案。但是，在我的回答中，不是菜單，而是點擊按鈕時會顯示<md-dialog>，因爲它在OP中有所要求。

除了用對話框工作的plunker之外，沒有太多東西可以添加到我認爲我可以編碼的答案中。如角材料md-panel demo所示，此處的關鍵是設置面板相對於按鈕的位置。要做到這一點（就像在角度材質演示中一樣），我們可以使用特定的css類（在我的示例中爲demo-dialog-open-button）來查找目標元素。在我看來，這是一件棘手的事情......但對於這個用例來說它很有效（在其他答案中也很好地解釋了它）。

代碼以供參考，請參閱完整細節plunker：

HTML（注意添加到按鈕的CSS類）：

<md-button class="md-primary md-raised demo-dialog-open-button" ng-click="ctrl.showDialog($event)"> 
    Dialog 
</md-button>

JS控制器。

var position = this._mdPanel.newPanelPosition() 
     .relativeTo('.demo-dialog-open-button') 
     .addPanelPosition(this._mdPanel.xPosition.ALIGN_START, this._mdPanel.yPosition.BELOW);

希望它可以幫助

來源

2016-10-14 12:41:45 troig

如何定位相對於按鈕的角度材質面板對話框？

回答

相關問題