पॉलिमर (1.0) पेपर-टूलबार पृष्ठभूमि रंग कैसे बदलें?

Question

कल मैंने पॉलिमर 1.0 को आजमाने का फैसला किया और पेपर-टूलबार स्टाइल करने की कोशिश करते समय मुझे पहले से ही कठिनाइयों का सामना करना पड़ रहा है।

प्रलेखन का कहना है कि पृष्ठभूमि रंग का उपयोग करके बदला जा सकता है: --paper-उपकरण पट्टी-पृष्ठभूमि

लेकिन मैं इसे कैसे सीएसएस पर उपयोग कर सकते हैं?

paper-toolbar { 
     --paper-toolbar-background: #e5e5e5; 
    } 

इसके अलावा इस:

paper-toolbar { 
     --paper-toolbar { 
      background: #e5e5e5; 
     } 
    } 

लेकिन न तो काम किया

मैं निम्नलिखित की कोशिश की। ऐसा करने का सही तरीका क्या है?

धन्यवाद।

Answer 1

यदि आप इसे अपने मुख्य पृष्ठ पर स्टाइल कर रहे हैं, तो आपको <style is='custom-style'> का उपयोग करके शैलियों को लागू करना होगा। यह कस्टम सीएसएस गुणों को काम करने के लिए है।

आवेदन करना अपेक्षाकृत आसान है। paper-toolbar 2 कस्टम गुण और एक मिश्रण प्रदान करता है। --paper-toolbar-background एक ऐसी संपत्ति है जो टूलबार के पृष्ठभूमि रंग को बदलती है जबकि --paper-toolbar-color इसके अग्रभूमि रंग को बदलती है। --paper-toolbar टूलबार पर लागू एक मिश्रण है।

इन गुणों का उपयोग करने के लिए आपके तत्वों में शैलियों को लागू करने जैसा ही है। उदाहरण के रूप में

<style is="custom-style"> 
    paper-toolbar { 
    --paper-toolbar-background: #00f; /* changes the background to blue*/ 
    --paper-toolbar-color: #0f0; /* changes the foreground color to green */ 
    --paper-toolbar: { 
     font-size: 40px; /* Change default font size */ 
    }; /* Notice the semicolon here */ 
    } 
</style> 

Answer 2

मुझे हाल ही में इस समस्या का हल नहीं मिला। मेरे पास दो टूलबार हैं और मैं केवल हेडर टूलबार के सभी टूलबार के लिए सीएसएस को बदलना नहीं चाहता था।

अपने बाहरी सीएसएस फ़ाइल में हर उपकरण पट्टी के लिए सीएसएस बदलने के लिए, जोड़ने निम्नलिखित:

paper-toolbar.paper-toolbar-0 { 
    background: orange; 
    color: red; 
} 

हालांकि, उस समस्या का समाधान नहीं है। निम्नलिखित की तरह एक वर्ग के आधार पर एक भी कागज उपकरण पट्टी बदलने के लिए:

<paper-toolbar class="header"> 
    ... 
</paper-toolbar> 

ऊपर मेरी सीएसएस में ऐसा वर्ग "शीर्षक" कहा जाता है का उपयोग करता है मैं कहा:

paper-toolbar.header { 
    background: orange; 
    color: red; 
} 

... और यह काम किया ! वाह! इसका मतलब है कि आप एक ही काम करने वाले किसी अन्य तत्व के किसी भी सीएसएस को ओवरराइड करने में सक्षम होना चाहिए। यह पूरी तरह से अनचाहे है लेकिन मुझे लगता है कि इसे काम करना चाहिए:

<elementName>.<classname> { 
    ... 
} 

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