पॉलिमर 1.0 में
धन्यवाद कस्टम सीएसएस गुण और कस्टम सीएसएस mixins की अवधारणाओं की शुरुआत की।
Custom CSS properties
बल्कि थीम के लिए एक तत्व के आंतरिक कार्यान्वयन के विवरण को उजागर करने के बजाय एक तत्व लेखक तत्व के एपीआई के भाग के रूप में परिभाषित करता है एक या अधिक कस्टम सीएसएस गुण से।
ये कस्टम गुण अन्य मानक सीएसएस गुणों के इसी प्रकार परिभाषित किया जा सकता है और बना डोम पेड़, color और font-family के प्रभाव के समान नीचे परिभाषा के बिंदु से प्राप्त कर लेगा।
Custom CSS mixins
यह एक तत्व लेखक आशा और ( व्यक्ति सीएसएस गुण के रूप में एक तत्व प्रसंगयुक्तप्रस्तुतिकरण के लिए हर संभव सीएसएस संपत्ति है कि महत्वपूर्ण हो सकता है बेनकाब करने के लिए के लिए थकाऊ (या असंभव) हो सकता है उदाहरण के लिए, यदि उपयोगकर्ता को टूलबार शीर्षक के opacity को समायोजित करने की आवश्यकता है?)।
इस कारण से, कस्टम गुण पॉलिमर में शामिल शिम एक विशिष्ट CSS नियम को लागू किया जा करने के लिए एक प्रायोगिक एक्सटेंशन लिए सीएसएस संपत्तियों की एक बैग की इजाजत दी कोई कस्टम गुण के रूप में परिभाषित किया जा और बैग में सभी गुण की इजाजत दी शामिल एक तत्व के स्थानीय डोम में। इसके लिए हमें अधिक जानने के लिए एक mixin क्षमता है कि var के अनुरूप है परिचय है, लेकिन गुण की एक पूरी बैग में घुल जाता है।
चेकआउट लिंक। नीचे आपको एक साधारण उदाहरण मिलेगा जिसमें paper-tabs तत्व और कस्टम शैलियों शामिल हैं।
<!DOCTYPE html>
<html>
<head>
<title>Paper Tabs Style 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-tabs/paper-tabs.html" />
<style is="custom-style">
:root {
--my-custom-color: red;
--paper-tab-ink: var(--my-custom-color);
/* custom CSS property */
--paper-tabs-selection-bar-color: blue;
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
}
</style>
</head>
<body>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
</body>
</html>
इस उदाहरण के लिए कुंजी भागों:
- आप
<style is="custom-style"> उपयोग कर सकते हैं मुख्य दस्तावेज़ में शैलियों के लिए।
- आप
--custom-color: red; जैसे अपने स्वयं के कस्टम सीएसएस चर बना सकते हैं और उन्हें --paper-tab-ink: var(--custom-color); जैसे उपयोग कर सकते हैं।
- आप परिभाषित कस्टम सीएसएस प्रॉपर्टी जैसे
--paper-tabs-selection-bar-color: blue; या --paper-tabs-selection-bar-color: rgba(0,255,0,0.5); पर किसी वैध, उपयुक्त सीएसएस को असाइन कर सकते हैं।
- कई तत्वों में पूर्व परिभाषित सीएसएस चर शामिल हैं।
paper-styles, उदाहरण के लिए, color.html और default-theme.html शामिल हैं। ये फ़ाइलें रंगों के लिए विभिन्न सीएसएस चर परिभाषित करती हैं जिनका प्रयोग तत्वों की शैली को अनुकूलित करने के लिए किया जा सकता है। --default-primary-color इन चरों में से एक है। निचे देखो।
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
यह imo सरकारी डॉक्स में इस तरह समझाया जाना चाहिए। धन्यवाद! –