विषय
- #सामान्य घटक
- #घटक विस्तार
बूटस्ट्रैप, व्यूटीफाई आदि UI लाइब्रेरी का उपयोग करने पर
उच्च गुणवत्ता वाले UI घटकों का आसानी से उपयोग किया जा सकता है।
लेकिन अक्सर कस्टमाइज़ेशन कैसे करें, इस बारे में चिंताएँ उत्पन्न होती हैं।
आमतौर पर, घटक के आंतरिक तत्वों तक पहुँचने के लिए
:deep(.class-name) जैसे एक्सेस का उपयोग किया जाता है,
समस्या यह है कि एक ही स्क्रीन पर एक ही घटक को अलग-अलग तरीके से कस्टमाइज़ करने की आवश्यकता होती है,
और दूसरी स्क्रीन पर समान शैली लागू करने की आवश्यकता होती है।
उदाहरण के लिए,
अगर आप ब्यूफी के टूलटिप घटक की पृष्ठभूमि का रंग बदलना चाहते हैं, तो आप इसे इस प्रकार उपयोग कर सकते हैं।
लेकिन अगर आप एक घटक को काले रंग में और दूसरे घटक को नारंगी रंग में बदलना चाहते हैं?
हर बार नई क्लास लागू करें। (CSS ओवरराइड)
अगर आपको दूसरी स्क्रीन पर भी काले रंग का टूलटिप इस्तेमाल करना है?
शैली को कॉपी-पेस्ट करें। (या मॉड्यूल का उपयोग करें।)
ऊपर बताई गई समस्या को हल करने के लिए, मैंने नीचे दिए गए अनुसार थोड़ा अधिक स्केलेबल घटक बनाया है।
इसे इस तरह से बनाया गया है।
अब, पैरेंट घटक में custom-tooltip.vue का उपयोग करें।
ऊपर दिए गए तरीके के अलावा, कई अन्य समाधान हैं।
- कस्टम निर्देशिका बनाकर विस्तार करने का तरीका
- $variables का उपयोग करके थीम का विस्तार करने का तरीका
हालांकि मैंने कई हिस्सों को छोड़ दिया है, शैली के अलावा, कई तर्क या API शामिल होने पर,
मुझे लगता है कि इस तरह से घटक को लपेटना अधिक उपयुक्त हो सकता है।
- अगर आपके पास कोई और अच्छा सुझाव है, तो कृपया मुझे बताएं।
टिप्पणियाँ0