कागज-मेनू-बटन (पॉलिमर-1.0) के अंदर पेपर-आइटम में लिंक

Question

अद्यतन 1: this issue with pull request पाया गया जो कि पॉलिमर में इस समस्या को संबोधित कर रहा है।

अपडेट 2: Polymer Starter Kit जो एप्लिकेशन-रूटर के बजाय page.js का उपयोग करता है, और अच्छी तरह से काम करने लगता है के आधार पर मेरे लेआउट पुनर्गठन करने, हालांकि वे कागज मेनू में कागज आइटम का उपयोग नहीं करते, लेकिन इसके बजाय का निर्णय लिया कस्टम एंकर तत्वों का उपयोग करें।

खोजें दस्तावेज के हर बिट लेकिन मैं यह नहीं मिल सकता है (हालांकि वहाँ लगभग एक ही शीर्षक के साथ है another issue on stackoverflow, नहीं एक ही बात)

TLDR: मैं लिंक करने के लिए पूरे कागज आइटम क्लिक करने योग्य करने की आवश्यकता है । सिर्फ पाठ ही नहीं। स्पष्टता के लिए नीचे दी गई छवि देखें और यहां live code है।

।

मुझे नीचे दिए गए कोड की तरह कुछ मिला है। मैं एप-राउटर रूटिंग के साथ संयोजन में लिंक टैग का उपयोग कर रहा हूं जो बहुत अच्छा काम करता है। एकमात्र समस्या यह है कि: मैं पूरे पेपर-मेनू-आइटम को लिंक टैग के साथ क्लिक करने योग्य होना चाहता हूं।

जब मैं नीचे कोड का उपयोग करता हूं, तो लिंक पेज पर सीधे क्लिक करते समय सही पृष्ठ पुनर्प्राप्त किया जाता है, लेकिन यह "चयनित" स्थिति नहीं बनाता है। जब मैं बटन पर क्लिक करता हूं (बस पाठ से बाहर) तो बटन चुना जाता है लेकिन पृष्ठ पुनर्प्राप्त नहीं किया जाता है क्योंकि मैंने लिंक पर क्लिक नहीं किया है ...

यह सही करने का एक आसान तरीका होना चाहिए? मेरा मतलब है, मैं इसे सभी सीएसएस को ओवरराइड करके मजबूर कर सकता हूं लेकिन ऐसा लगता है कि पेपर-मेन्यू में पेपर-आइटम में एक लिंक एक बहुत ही आम बात होगी जो इसे स्वचालित रूप से या एक विशेषता या कभी-कभी करनी चाहिए?

<paper-menu class="list"> 
    <paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item> 
    <paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item> 
</paper-menu> 

मैंने पेपर-आइटम, पेपर-मेनू और अन्य पर दस्तावेज़ों की जांच की लेकिन वे कभी भी एक लिंक के साथ उदाहरण का उपयोग नहीं करते हैं।

Answer 1

आईएमओ, सबसे साफ तरीका है कि लिंक को पूरी तरह से छोड़ दें और केवल ऑन-टैप ईवेंट जोड़ें।

(आप भी अपने मेनू के लिए डोम-दोहराने उपयोग कर सकते हैं)

<paper-menu class="list"> 
    <paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item> 
    <paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item> 
</paper-menu> 

मैं अपने app-router की वजह से <a> टैग का उपयोग कर रहे हैं यह सोचते हैं रहा हूँ।

एप्लिकेशन रूटर डॉक से:

जाने (पथ, विकल्प) - आप लाजि़मी नेविगेट करने के लिए जावास्क्रिप्ट से रूटर कॉल कर सकते हैं।

तो फिर तुम सरल अपनी खुद की ऑन-टैब हैंडलर लिख सकते हैं और प्रत्येक <paper-item>

Polymer({ 
    is: 'your-menu', 
    menuSelected: function (e) { 
     var mypath = e.currentTarget.getAttribute('mypath'); 
     document.querySelector('app-router').go(mypath); 
    }, 
})(); 

Answer 2

पर कस्टम विशेषता (mypath) का उपयोग class="flex" अपने एंकर टैग से प्रत्येक के लिए जोड़ सकते हैं।