पॉलिमर कोर मचान रंग और पेपर बटन

मैं एक उत्तरदायी वेबसाइट बनाने के लिए polymer 0.5 कोड का उपयोग शुरू कर रहा हूं। मुझे पता है कि यह पूरी तरह खत्म नहीं हुआ है, लेकिन फिर भी मुझे इसे जल्दी से पूरा करने के लिए यह बहुत साफ और सरल लगता है।पॉलिमर कोर मचान रंग और पेपर बटन

अब, मैं सामान्य लेआउट के रूप में core-scaffold का उपयोग कर रहा हूं। मुझे पता है कि साइडबार को कैसे रंगा जाए, लेकिन मुझे यकीन नहीं है कि मैं मुख्य सामग्री सेटिंग्स कहां रख सकता हूं।

<html> 
    <head> 
     <style> 
      html,body { 
       height: 100%; 
       margin: 0; 
       background-color: #E5E5E5; 
       font-family: 'RobotoDraft', sans-serif; 
      } 

      core-toolbar { 
       background: #E5E5E5; 
       color: white; 
      } 

      paper-item.core-selected { 
       color: #99182c; 
       fill: #99182c; 
      } 
     </style> 

    </head> 

    <body unresolved touch-action="auto"> 

     <core-scaffold> 

      <core-header-panel navigation flex mode="seamed"> 
       <core-toolbar style="background-color: #99182c; color:#fff;">Main site name</core-toolbar> 
       <core-menu selected="0"> 
        <paper-item icon="home" label="Home"></paper-item> 
        <paper-item icon="today" label="Activities"></paper-item> 
        <paper-item icon="account-box" label="People"></paper-item> 
        <paper-item icon="theaters" label="Pictures"></paper-item> 
        <paper-item icon="info" label="Info"></paper-item> 
        <paper-item icon="lock" label="Login"></paper-item> 
       </core-menu> 
      </core-header-panel> 

      <div tool>Home</div> 
     </core-scaffold> 
    </body> 
</html>

तो कोर-टूलबार बाएं साइडबार स्टाइल कर रहा है, लेकिन मैं मुख्य पृष्ठ को कैसे शैलीबद्ध करूं?

मेरे पास एक और मुद्दा यह है कि मैं पेपर तत्वों के साथ काम करना चाहता हूं। हालांकि, इस core-scaffold का उपयोग करते समय, आप देखेंगे कि जब स्क्रीन पर्याप्त छोटा हो और टैब बाएं मेनू बार खोलने के लिए प्रतीत होता है, तो यह एक 'सामान्य' बटन है, न कि पेपर एक। चूंकि यह core-scaffold में है, इसलिए मुझे यह नहीं पता कि इसे कैसे बदला जाए (यदि यह संभव है)। कोई विचार?

स्रोत

2014-07-06 jdepypere

मैं एक ही समस्या में भाग गया और यह पता चला कि आप आंतरिक तत्व (जो छाया डोम के अंदर है) तक पहुंचने के लिए विशेष वाक्यविन्यास के साथ सीएसएस का उपयोग करके अन्य तत्वों (कोर-स्काफोल्ड) के अंदर तत्वों (टूलबार) को स्टाइल कर सकते हैं) ::shadow छद्म-तत्व का उपयोग कर।

शीर्ष नियम शीर्षक पृष्ठभूमि का रंग बदलता है जबकि दूसरा सामग्री क्षेत्र की पृष्ठभूमि को बदलता है।

core-scaffold::shadow core-toolbar { 
    background: #E5E5E5; 
    color: black; 
} 

core-scaffold::shadow core-header-panel { 
    background: #FFF; 
    color: black; 
}

स्रोत: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat

अद्यतन: इसका कारण यह है की परतें Firefox के साथ ठीक से काम नहीं किया।

<style shim-shadowdom> 
    core-scaffold core-toolbar { 
    background: #EEE; 
    color: black; 
    } 

    core-scaffold #main core-header-panel { 
    background: #FFF; 
    color: black; 
    } 
</style>

ध्यान दें कि सामग्री क्षेत्र की पृष्ठभूमि को बदलने के लिए मैं भी #main चयन करने के लिए इतना ::shadow नियम पोर्टिंग का एक सा की आवश्यकता हो सकती थी: क्या यह है कि केवल जब पर a non webcomponent/shadowdom native platform व्याख्या हो जाता है shim-shadowdom निर्देश के साथ शैलियों जोड़ने रहा था निरीक्षण ...

अंत में जब आपको फ़ायरफ़ॉक्स और अन्य ब्राउज़रों के साथ वेबकंपोनेंट/पॉलिमर तत्व से ठीक से निपटने की आवश्यकता होती है तो आप use the polyfill-rule or polyfill-unscoped-rule कर सकते हैं।

स्रोत

2014-07-07 18:35:02 jun

-1

/bower_components/core-scaffold/core-scaffold.html में टैग में खुदाई करके और पृष्ठभूमि रंग बदलकर नौसेना नीले रंग से शैली को बदलना संभव है; हालांकि यह सभी डिफ़ॉल्ट बदलता है।

स्रोत

2014-07-07 06:13:50 user3634064

यह भी एक मुख्य शीर्षक है, इसलिए एक वर्ग और शैली जैसे thaT – user3634064

जोड़ें आप 'बॉवर अपडेट' पर अपने सभी संशोधन खो देंगे। –

पॉलिमर कोर मचान रंग और पेपर बटन

उत्तर

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