मैं बटन के सापेक्ष एक कोणीय सामग्री पैनल संवाद कैसे स्थापित कर सकता हूं?

Question

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() के लिए कड़ी मेहनत के मूल्यों में पासिंग, उदाहरण के लिए, की अनुमति देता है व्यूपोर्ट में स्थिति रिश्तेदार। मैं क्लिक किए गए तत्व के सापेक्ष स्थिति निर्धारण नहीं कर सकता, हालांकि। यह कैसे काम करना चाहिए?

Answer 1

मैं पिछले कई महीनों से कोणीय सामग्री के साथ काम कर रहा हूं और अभी भी दस्तावेज की कमी है, इसलिए इस पोस्ट की लंबाई को इस मुद्दे पर मेरे छद्म दस्तावेज के रूप में क्षमा करें। लेकिन यहाँ मैं क्या जानते हो रहा है:

मैं केवल पैनल स्थान काम करने के लिए, एक लक्ष्य तत्व के सापेक्ष प्राप्त करने में सक्षम किया गया है इस तरह के रूप relativeTo समारोह पर addPanelPosition समारोह चेनिंग द्वारा,:

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

मैं addPanelPosition के लिए स्वीकार्य मानकों को ट्रैक करने में सक्षम था (इस मामले में, ev $ घटना एनजी क्लिक द्वारा पारित वस्तु है) और वे निम्नलिखित हैं:

पैनल वाई स्थिति केवल निम्नलिखित मान स्वीकार करती है: केंद्र | संरेखण-टॉप | संरेखण-बोतलों | ऊपर |

पैनल x स्थिति केवल निम्न मान स्वीकार करती है: केंद्र | संरेखण शुरू करें | संरेखण अंत | ऑफ़सेट-स्टार्ट | ऑफसेट अंत

Interstingly पर्याप्त, कोणीय सामग्री डेमो में, वे this._mdPanel.xPosition.ALIGN_START और this._mdPanel.yPosition.BELOW गुण जो केवल और addPanelPosition समारोह के लिए अपने एक्स के रूप में तार y मूल्यों के हल का उपयोग करें। मैं हमेशा स्ट्रिंग मानों के साथ सीधे चला गया है। हालांकि, स्ट्रिंग मानों का उपयोग समस्याग्रस्त हो सकता है यदि इस सुविधा का विकास अभी भी प्रवाह में है और वे स्वीकार्य स्ट्रिंग मानों को बदलते हैं।

मैं एक और मुद्दा बताऊंगा जो मैंने देखा है।

डेमो में उपयोग की जाने वाली एक और चाल एक लक्ष्य तत्व के बजाय relativeTo फ़ंक्शन में कक्षा का नाम निर्दिष्ट करना है, फिर उस वर्ग को लक्ष्य तत्व पर ही रखें। कारण यह दृष्टिकोण उपयोगी हो सकता है क्योंकि एनजी-क्लिक से $ इवेंट ऑब्जेक्ट बिल्कुल क्लिक किए गए विभिन्न आधार तत्वों को प्रदान कर सकता है। उदाहरण के लिए, बटन <div> बटन पर क्लिक करके बटन के अंदर <span> टेक्स्ट पर क्लिक करने से अलग लक्ष्य देना होगा। यह आपके पैनल को तब तक स्थानांतरित करने का कारण बनता है जब तक कि आप ऐसा करने के लिए अतिरिक्त कार्यक्षमता प्रदान न करें।

Codepen

मैं उनके प्रदर्शन में ले लिया और वास्तव में इसे आकार करने के लिए कटौती इस मुद्दे पर ध्यान दें। आप अद्यतन कोडपेन here

Answer 2

संवाद बहुत सरल विजेट देख सकते हैं। फ्लाईपिंग फोकस उनके द्वारा की जाने वाली सबसे जटिल चीज के बारे में है। यह मुझे दर्द देता है कि आपकी समस्या इतनी जटिल में विकसित हुई है।

बस स्पष्ट करने के लिए, आपके कॉन्फ़िगर किए गए क्लास नाम के लिए किसी भी व्यक्तिगत संवाद को धन्यवाद देने पर आपके पास पूर्ण नियंत्रण है।

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

इसके अलावा, आपके showDialog विधि में, क्यों ऊपर खुला विधि के लिए एक वादा के माध्यम से एक कॉल-बैक सेट नहीं? कुछ की तरह:

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 
}); 

मैं सम्मान है कि आप प्लगइन का तर्क में सुधार लाने और बातें "कोणीय रास्ता" क्या करने की कोशिश कर रहे हैं, लेकिन इन अपेक्षाकृत सरल आवश्यकताओं आप इतना गहन खिन्नता नहीं पैदा कर रहा किया जाना चाहिए।

Answer 3

जैसा कि मैंने एक टिप्पणी में पोस्ट किया है, here आप इसे एक प्लंकर पर काम कर सकते हैं।

मेरा समाधान बहुत करीब है @ मुझे लगता है कि मैं जवाब दे सकता हूं। हालांकि, मेरे उत्तर में, मेनू के बजाय, <md-dialog> प्रदर्शित होता है जब बटन क्लिक किया जाता है, क्योंकि ओपी में अनुरोध किया जाता है।

एक संवाद के साथ काम करने वाले प्लंकर के अलावा, अच्छे में जोड़ने के लिए बहुत कुछ नहीं है @ मुझे लगता है कि मैं कोड का जवाब दे सकता हूं। जैसा कि यह कोणीय-सामग्री md-panel demo में दिखाया गया है, यहां कुंजी बटन के सापेक्ष पैनल की स्थिति सेट करना है। ऐसा करने के लिए (कोणीय-भौतिक डेमो में), हम लक्ष्य तत्व खोजने के लिए एक विशिष्ट सीएसएस वर्ग (demo-dialog-open-button मेरे उदाहरण में) का उपयोग कर सकते हैं। यह मेरी राय में एक मुश्किल बात है ... लेकिन यह इस उपयोग के मामले के लिए अच्छी तरह से काम करता है (यह अन्य उत्तरों में भी अच्छी तरह से समझाया गया है)।

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

जे एस नियंत्रक: (सीएसएस वर्ग बटन को जोड़ा गया ध्यान दें)

एचटीएमएल: संदर्भ के लिए

कोड, पूर्ण विवरण के लिए plunker देखते हैं।

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

आशा है कि यह मदद करता है