Ext.js - शैली
एप्लीकेशन स्टाइलिंग से तात्पर्य है घटकों के रूप-रंग का उपयोगकर्ता समायोजन। इन समायोजन में शामिल हो सकते हैं: रंग, रंग ग्रेडिएंट, फ़ॉन्ट, मार्जिन / पैडिंग, आदि। एक्सएस जेएस 6 में एप्लिकेशन को स्टाइल करने का एक नया तरीका है।
यह स्टाइल के लिए SCSS का उपयोग करता है। SCSS CSS कोड लिखने का एक अधिक गतिशील तरीका है। हम इसकी शैली में चर को इसकी सहायता से लिख सकते हैं। हालाँकि, कोई ब्राउज़र SCSS को नहीं समझ सकता है। यह केवल CSS को समझ सकता है, इसलिए सभी SCSS फ़ाइलों को CSS से उत्पादन-तैयार कोड में संकलित किया जाना चाहिए।
इस प्रकार, SCSS फ़ाइल को प्रीप्रोसेसर फ़ाइलें कहा जाता है। Ext.js में, संकलन सींचा सीएमडी उपकरण के माध्यम से किया जाता है। Sencha CMD केवल एक बार निम्न कमांड का उपयोग करके इसे मैन्युअल रूप से संकलित करता है।
sencha app build [development]Global_CSS मुख्य सीएसएस फाइल है, जिसमें सभी SCSS चर हैं जो एक्सटीजेएस में इसके साथ जुड़े हैं जो कि हमारी आवश्यकता के आधार पर विभिन्न मूल्य प्रदान करके हमारे विषय को अनुकूलित करने के लिए हमारे आवेदन में उपयोग किया जा सकता है।
Ext.js. में Global_CSS में उपलब्ध कुछ सीएसएस चर निम्नलिखित हैं।
| अनु क्रमांक | चर और विवरण |
|---|---|
| 1 | $base-color $ आधार-रंग: रंग (जैसे $ आधार-रंग: # 808080) इस बेस कलर को पूरे थीम में इस्तेमाल किया जाना है। |
| 2 | $base-gradient $ बेस-ग्रेडिएंट: स्ट्रिंग (जैसे $ बेस-ग्रेडिएंट: 'मैट') इस बेस ग्रेडिएंट को पूरे थीम में उपयोग किया जाना है। |
| 3 | $body-background-color $ शरीर-पृष्ठभूमि-रंग: रंग (जैसे $ शरीर-पृष्ठभूमि-रंग: # 808080) शरीर के तत्व पर लागू करने के लिए पृष्ठभूमि का रंग। यदि पारदर्शी या 'कोई नहीं' पर सेट किया जाता है, तो शरीर तत्व पर कोई पृष्ठभूमि-रंग शैली सेट नहीं की जाएगी। |
| 4 | $color $ रंग: रंग (जैसे $ रंग: # 808080) यह डिफ़ॉल्ट पाठ रंग पूरे विषय में उपयोग किया जाना है। |
| 5 | $font-family $ फॉन्ट-परिवार: स्ट्रिंग (जैसे $ फॉन्ट-परिवार: एरियल) यह डिफ़ॉल्ट फॉन्ट-परिवार पूरे विषय में उपयोग किया जाना है। |
| 6 | $font-size $ फ़ॉन्ट-आकार: संख्या (जैसे $ फ़ॉन्ट-आकार: 9px) यह डिफ़ॉल्ट फॉन्ट-साइज़ पूरे थीम में उपयोग किया जाना है। |
| 7 | $font-weight $ फ़ॉन्ट-वजन: स्ट्रिंग / संख्या (जैसे $ फ़ॉन्ट-वजन: सामान्य) यह डिफ़ॉल्ट फॉन्ट-वेट पूरे विषय में उपयोग किया जाना है। |
| 8 | $font-weight-bold $ फ़ॉन्ट-वजन-बोल्ड: स्ट्रिंग / संख्या (जैसे $ फ़ॉन्ट-वजन-बोल्ड: बोल्ड) बोल्ड फ़ॉन्ट के लिए यह डिफ़ॉल्ट फॉन्ट-वेट पूरे विषय में उपयोग किया जाना है। |
| 9 | $include-chrome $ शामिल-क्रोम: बुलियन (जैसे $ शामिल-क्रोम: सच) Chrome के विशिष्ट नियमों को शामिल करना सही है। |
| 10 | $include-ff $ शामिल- ff: बूलियन (जैसे $ शामिल- ff: सच) फ़ायरफ़ॉक्स विशिष्ट नियमों को शामिल करना सही है। |
| 1 1 | $include-ie $ शामिल-यानी: बूलियन (जैसे $ शामिल-यानी: सच) IE9 और लोअर के लिए इंटरनेट एक्सप्लोरर विशिष्ट नियमों को शामिल करना सही है। |
| 12 | $include-opera $ शामिल-ओपेरा: बूलियन (जैसे $ शामिल-ओपेरा: सच) ओपेरा विशिष्ट नियमों को शामिल करना सही है। |
| 13 | $include-safari $ शामिल-सफारी: बूलियन (जैसे $ शामिल-सफारी: सच) ओपेरा विशिष्ट नियमों को शामिल करना सही है। |
| 14 | $include-webkit $ शामिल-वेबकिट: बूलियन (जैसे $ शामिल-वेबकिट: सच) Webkit के विशिष्ट नियमों को शामिल करना सही है। |