2015-06-03 8 views
6

में फिट हो जाता है, मैं वस्तुओं की एक क्लिक करने योग्य सूची पर लहर प्रभाव का उपयोग करने की कोशिश कर रहा हूं लेकिन मुझे इस समस्या का सामना करना पड़ रहा है कि लहर पर सभी स्क्रीन पर प्रभाव पड़ता है जब मैं उस सूची को एक कस्टम तत्व में समाहित करता हूं। यह बहुत अच्छा काम करता है अगर मैं इसे अपने index.html में रखता हूं लेकिन जब मैं वहां शामिल एक कस्टम तत्व बना देता हूं तो विफल रहता है। मैं इसी तरह के सवाल पढ़ने किया गया है जहां जवाब कंटेनर रिश्तेदार है, जो पहले से ही किया जाना चाहिए बनाने के लिए हैपॉलिमर 1.0 - पेपर-रिपल स्क्रीन पर पूरी तरह से तत्व

enter image description here

: मुद्दे की एक छवि देखें। इसलिए मैं सोच रहा हूं कि कस्टम तत्व से लहर प्रभाव का उपयोग करते समय मेजबान में किसी विशेष विशेषता को सेट करना आवश्यक है या नहीं।

मेरा उदाहरण कोड निम्नानुसार है।

Index.html

<!doctype html> 
<html lang=""> 

<head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>List test</title> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="elements/elements.html"> 
    <style> 
    paper-icon-item { 
     position: relative; 
     height: 48px; 
    } 
    </style> 
</head> 
<body unresolved class="fullbleed layout vertical"> 
    <template is="dom-bind" id="app"> 
     <my-list></my-list> 
    </template> 
    <script src="scripts/app.js"></script> 
</body> 
</html> 

मेरी-list.html

<dom-module id="my-list"> 
    <style> 
     paper-icon-item { 
     position: relative; 
     height: 48px; 
     } 
    </style> 
    <template> 
    <section> 
    <div class="menu"> 
     <paper-icon-item> 
     <div class="label" fit>Mark as unread</div> 
     <paper-ripple></paper-ripple> 
     </paper-icon-item> 
     <paper-icon-item> 
     <div class="label" fit>Mark as important</div> 
     <paper-ripple></paper-ripple> 
     </paper-icon-item> 
     <paper-icon-item> 
     <div class="label" fit>Add to Tasks</div> 
     <paper-ripple></paper-ripple> 
     </paper-icon-item> 
     <paper-icon-item> 
     <div class="label" fit>Create event</div> 
     <paper-ripple></paper-ripple> 
     </paper-icon-item> 
    </div> 
    </section> 
    </template> 

</dom-module> 
<script> 
    (function() { 
     Polymer({ 
     is: 'my-list' 
     }); 
    })(); 
</script> 

जब खंड टैग सामग्री (अनुभाग टैग शामिल) मेरी सूची के द्वारा index.html में जगह। एचटीएमएल, लहर प्रभाव ठीक काम करता है। लहर में फिट संपत्ति ने समस्या को हल नहीं किया। कस्टम घटक में मुझे क्या याद आ रही है?

उत्तर

7

नोट: आप इस व्यवहार, या यह करने के लिए इसी तरह के व्यवहार का सामना कर रहे हैं, तो paper-ripple के नवीनतम संस्करण में, यह संभावना है कि समस्या यह है कि क्या यह उत्तर पतों आपकी समस्या का नहीं है (नीचे अद्यतन देखें) ।

paper-ripple निम्नलिखित सीएसएस (केवल प्रासंगिक लाइनों दिखाया गया है) है:

:host { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

paper-ripple की पेरेंट तत्व position: relative सेट नहीं है, तो यह पहली position: relative माता पिता है कि यह पाता भरने लहर में परिणाम होगा , जो इसके तत्काल माता-पिता या पूरे दस्तावेज़ नहीं हो सकता है, जो भी पहले आता है।

इसे ठीक करने के लिए, सुनिश्चित करें कि आप जिस तत्व का उपयोग कर रहे हैं paper-ripple में position: relative है।

अद्यतन(15 जून 2015) :paper-ripple 1.0.1 पर 11 जारी किया गया था जून 2015, जो the PR fixing this problem भी शामिल है, ठीक करता है इस जवाब अप्रचलित में सिफारिश की बना रही है।PolymerElements/paper-ripple#^1.0.1 पर बाध्य करने के लिए बस bower.json अपडेट करें।


यह समस्या a current issue with paper-ripple के कारण होती है।क्या हो रहा है कि paper-ripple तत्व my-list तत्व को उनके माता-पिता paper-icon-item तत्व के बजाय लक्षित कर रहे हैं।

  1. इस बीच, अपने छायादार/छाया डोम में एक paper-ripple तत्व है कि एक कस्टम तत्व बनाते हैं, और आकार इसे अपने तत्व फिट करने के लिए:

    वर्तमान में इसे ठीक करने के दो तरीके हैं।

    उदाहरण के लिए:

<dom-module id="ripple-wrapper"> 
    <style is="custom-style"> 
    :host { 
     display: block; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
    } 
    </style> 
    <template> 
    <paper-ripple></paper-ripple> 
    </template> 
</dom-module> 
<script> 
    Polymer({ is: 'ripple-wrapper' }); 
</script> 
  1. मैं भंडार है कि इस समस्या के लिए एक समाधान शामिल है के लिए एक pull request सबमिट किए हैं। वर्तमान में, हालांकि, इसे अभी तक विलय नहीं किया गया है। अभी के लिए, आप paper-ripple के paper-ripple के संस्करण को bower.json फ़ाइल में vsimonian/paper-ripple#containment-fix पर सेट करके paper-ripple की पैच की गई प्रति स्थापित करने के लिए बोअर को बता सकते हैं।

    आप ऐसा करते हैं, मैं अत्यधिक सुझाव है कि आप issue और pull request पर नजर रखें ताकि आप bower.json में अस्थायी परिवर्तनों को वापस कर सकते हैं, जब वे अब जरूरत नहीं है।

+1

मैं 1.0.1 संस्करण के लिए कागज लहर अद्यतन लेकिन यह इस समस्या का समाधान नहीं किया था –

+1

@WaleedAsender ओपी एक तुम भर में भाग गया से कोई अन्य समस्या आ गई थी। जैसे ही @zerodevx ने उल्लेख किया है, यदि कोई 'स्थिति: पूर्ण' तत्व 'शीर्ष पर 0: तक बढ़ाया गया है; बाएं: 0; नीचे: 0; दाएं: 0; ', जैसे कि लहर,' स्थिति: रिश्तेदार 'कंटेनर में नहीं है, फिर यह अपने मूल तत्व की बजाय विंडो भर जाएगी। इसका परिणाम इसी तरह की समस्या में होता है, लेकिन वास्तव में, जैसा कि आपने बताया है, मेरे उत्तर के साथ मैंने जो समस्या हल की है उससे अलग है। मैं आगे बढ़ूंगा और जवाब अपडेट करूँगा, क्योंकि बग लंबे समय से पैच किया गया है, किसी और के लिए जो इस प्रश्न में चलता है। –

0

उद्घाटन <style> टैग my-list.html में अनुपलब्ध है।

ऐसा लगता है कि <paper-ripple> तत्व पर लहर प्रभाव को ट्रिगर करने से यह उस कस्टम तत्व के अंदर अन्य सभी <paper-ripple> तत्वों पर ट्रिगर होता है। वस्तुओं के लिए कस्टम तत्व बनाना या कस्टम तत्व के बाहर सब कुछ ले जाना मेरे लिए समस्या का समाधान करना प्रतीत होता है।

3

यह ध्यान देने योग्य है कि साथ शायद है - एक संभावित पकड़ लिया के रूप में - यह position: relative;

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

http://jsbin.com/zijumuhege/edit?html,output

+0

इसने समस्या हल कर दी है, आपको बहुत धन्यवाद –

+0

@kctang, अच्छी पकड़! क्या मैंने वास्तव में 'प्रदर्शन: रिश्तेदार' लिखा था ?? संपादन के लिए धन्यवाद! :) – zerodevx

संबंधित मुद्दे