पॉलिमर 1.0 पेपर-शैलियों का उपयोग तत्व

दुर्भाग्यवश, मुझे पेपर-शैलियों के उपयोग के लिए वर्तमान दस्तावेज/उदाहरण मिल रहा है। मैं एक अनुभवी सीएसएस लड़का नहीं हूं (वास्तव में रिश्तेदार नौसिखिया), इसलिए मैं वास्तव में इसके सभी कस्टम तत्वों द्वारा उपयोग किए जाने के लिए पॉलिमर 1.0 एप्लिकेशन-व्यापी स्टाइल को कार्यान्वित करने के उदाहरणों का उपयोग कर सकता हूं (यानी किसी भी टैग में कक्षाओं को लागू करके उन कस्टम तत्व के स्थानीय डीओएम)। मैंने कोर-शैलियों का उपयोग करके पॉलिमर 0.5 में अपेक्षाकृत आसानी से इस तरह की चीज की, लेकिन यह मुझे भ्रमित करने के लिए 1.0 में काफी बदल गया है, खासकर पूर्ण दस्तावेज़/उदाहरणों के बिना काम करने के लिए। ऐसा लगता है कि इसे पूरा करने के कुछ तरीके हो सकते हैं। मैं यह भी सोच रहा हूं कि पेपर-शैलियों को अभी भी 1.0 में प्रयोगात्मक माना जाता है? पॉलिमर 1.0 ऑनलाइन तत्व कैटलॉग (https://elements.polymer-project.org/elements/paper-styles) में इसका उपयोग करने के लिए कोई दस्तावेज़ या उदाहरण नहीं हैं, हालांकि मैं इसके कुछ गिटहब रिपोजिटरी पर 'कुछ' में आया हूं।पॉलिमर 1.0 पेपर-शैलियों का उपयोग तत्व

स्रोत

2015-07-16 sinjins

'पेपर-शैलियों' सिर्फ 'ऐप-थीम.html' फ़ाइल के समान है। आप इसे अपनी परियोजना पर आयात करते हैं और इसे परिभाषित कस्टम गुण लागू किए जाएंगे और/या उपयोग किए जा सकते हैं। –

दस्तावेज की कमी होने पर आप एक चीज कर सकते हैं जो उस कोड का उपयोग कर रहे हैं जो आप उपयोग करना चाहते हैं। paper-tabs, उदाहरण के लिए, paper-styles का उपयोग करता है। आप paper-styles/color.html का paper-tabs.html में एक उदाहरण आयात देख सकते हैं। मूल्य --paper-yellow-a100 का उपयोग paper-tabs.html में किया जा रहा है। मुख्य दस्तावेज़ में शैली लागू करने के लिए paper-styles में परिभाषित विभिन्न सीएसएस चर (var) और मिक्सिन (@apply) का उपयोग करने का एक उदाहरण नीचे दिया गया है।

<!DOCTYPE html> 
<html> 
<head> 
    <title>paper-styles Example</title> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link rel="import" href="bower_components/polymer/polymer.html" /> 
    <link rel="import" href="bower_components/paper-styles/paper-styles.html" /> 
    <style is="custom-style"> 
     .shadow { 
      @apply(--shadow-elevation-16dp); 
     } 

     section { 
      background-color: var(--google-blue-700); 
     } 

     p { 
      @apply(--paper-font-display3); 
     } 
    </style> 
</head> 
<body> 
    <section class="shadow"> 
     <h1>Example</h1> 
     <p> 
      This is an example using <em>paper-styles</em>. 
     </p> 
    </section> 
</body> 
</html>

Click here to learn more about styling in Polymer 1.0.

के बारे में कागज शैलियों प्रयोगात्मक जा रहा है आपके प्रश्न के संबंध में, Polymer home page in the catalog section पर यह कहा गया है:

कस्टम तत्वों, पॉलिमर टीम द्वारा बनाया गया में इस्तेमाल के लिए तैयार अपने अनुप्रयोग।

हालांकि, साइट पर विभिन्न स्थानों पर styling सहित, प्रयोगात्मक सुविधाओं का उल्लेख है।

कस्टम गुण पॉलिमर में शामिल शिम एक प्रायोगिक एक्सटेंशन

इस समय का उपयोग कर @apply प्रयोगात्मक पर विचार किया जाएगा शामिल हैं।

Experimental features & elements शीर्षक वाली पॉलिमर वेबसाइट पर एक पृष्ठ है, आप अधिक जानकारी के लिए देख सकते हैं।

स्रोत

2015-07-17 18:58:21 coderfin

सामान्य गलतफहमी यह मानती है कि paper-styles तत्व आयात करके, दस्तावेज़ सामग्री डिज़ाइन चश्मा के अनुसार स्टाइल हो जाता है। ऐसा नहीं है।

आपको बस सभी चर और मिश्रण मिलते हैं।

फिर आपको उन्हें अपने कस्टम-तत्व के अंदर प्रत्येक तत्व में लागू करने की आवश्यकता है जिस तरह से आप इसे फिट देखते हैं।

<dom-module id="demo-element"> 
    <template> 
     <style> 
      :host { 
       display: block; 
       background: var(--paper-blue-500); 
       padding: 20px; 
      } 

      .title { @apply(--paper-font-title); } 

      button { @apply(--paper-font-button); }  
     </style> 

     <h1 class="title">Hello World</h1> 

     <button>Demo</button> 

    </template> 
    <script> 
     Polymer({ 
      is: 'demo-element' 
     }); 
    </script> 
</dom-module>

सौभाग्य शैलियों अच्छी तरह से प्रत्येक सिर्फ सौ लाइनों अधिकतम के एक जोड़े के साथ सिर्फ चार फ़ाइलों अंदर संरचित कर रहे:

यहाँ एक उदाहरण तत्व है।

स्रोत

2015-11-15 00:56:35 LoveAndHappiness

पॉलिमर 1.0 पेपर-शैलियों का उपयोग तत्व

उत्तर

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