Vue.js में स्टाइल-कंपोनेंट्स का उपयोग करके एक एप्लिकेशन बनाना

नमस्कार, हेब्र! दूसरे दिन मैं पुर्तगाली में एक बहुत ही दिलचस्प लेख लेकर आया। सौभाग्य से, हम इसका अंग्रेजी संस्करण खोजने में कामयाब रहे। मैं आपके ध्यान में रूसी में अनुवाद लाता हूं। आप मेरे पेज पर मेरे अन्य अनुवाद पा सकते हैं।

मूल लिंक: पुर्तगाली , अंग्रेजी

उन लोगों के लिए जो विषय में नहीं हैं। स्टाइल-कंपोनेंट्स, रिएक्ट और Ract- देशी डेवलपर्स के बीच एक बहुत लोकप्रिय लाइब्रेरी है। यह आपको सीधे जेएस में कस्टम सीएसएस लिखने की अनुमति देता है।

Vue में, हम जानते हैं कि सिंगल-फाइल घटकों (SFC) के साथ काम करना कितना सुविधाजनक है, क्योंकि सभी आवश्यक घटक एक ही स्थान पर एकत्र किए जाते हैं। SFC पैटर्न ने Vue की लोकप्रियता में काफी वृद्धि की है।

पिछले कुछ महीनों में मुझे रिएक्ट पर एक बड़ी परियोजना के विकास में भाग लेने का अवसर मिला। हमने इसमें स्टाइल-कंपोनेंट्स का इस्तेमाल किया, और यह एक बहुत ही दिलचस्प अनुभव था।

हालाँकि, मेरी अधिकांश परियोजनाओं में मैं Vue का उपयोग करता हूं, इसलिए यह स्वाभाविक है कि मैं स्टाइल-कंपोनेंट्स के साथ नए अनुभव और Vue.js पारिस्थितिकी तंत्र के लाभों को जोड़ना चाहता था। यह तब था जब मुझे पता चला कि इस तरह का एक समाधान पहले से मौजूद है और उसी रचनाकारों द्वारा रिएक्ट के तहत एक ही पुस्तकालय के रूप में समर्थित है: vue- स्टाइल-घटकों ।

शुरुआत

खाली चैटर को अलग रखें और कोड पर जाएं। हमेशा की तरह, यार्न या एनपीएम का उपयोग करें।

// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components 

मेरे गितुब पर आपको इस पुस्तकालय का उपयोग करने के उदाहरणों के साथ एक भंडार मिलेगा।

उदाहरणों में उपयोग किए जाने वाले प्रत्येक तत्व को अलग-अलग घटकों द्वारा अपने व्यक्तिगत गुणों के साथ या अन्य घटकों से डेटा प्राप्त करके वीयू स्टाइल घटकों द्वारा संसाधित किया जा सकता है।

हमारा पहला उदाहरण डिफ़ॉल्ट शैलियों के साथ एक बटन है।

 import styled from "vue-styled-components"; const CButton = styled.button` font-size: 1em; text-align: center; color: #FFFFFF; border-radius: 5px; padding: 10px 15px; background-color: #0057AA; `; export default CButton; 

हमारे आवेदन में कहीं भी हम इस घटक का उपयोग कर सकते हैं।

  import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, } 

पासिंग पैरामीटर

Vue- स्टाइल-घटकों में, आप गुणों के माध्यम से इन मूल्यों को पारित करके एक घटक के लिए शैलियों को गतिशील रूप से परिभाषित कर सकते हैं। यह उदाहरण दिखाता है कि जब मुख्य विशेषता पारित हो जाती है, तो बटन को एक नई पृष्ठभूमि शैली और फ़ॉन्ट रंग प्राप्त होगा।

 import styled from "vue-styled-components"; const typeButton = { primary: Boolean }; const CButtonProps = styled('button', typeButton)` font-size: 1em; text-align: center; color: ${props => props.primary ? '#0057AA' : '#FFFFFF'}; border-radius: 5px; padding: 10px 15px; background-color: ${props => props.primary ? '#FFFFFF' : '#0057AA'}; `; export default CButtonProps; 

उपरोक्त उदाहरण में सुधार किया जा सकता है और यहां तक ​​कि नए गुणों को भी जोड़ा जा सकता है (आप जितनी चाहें उतनी विशेषताओं को पारित कर सकते हैं)। सब कुछ परियोजना के भीतर आपकी आवश्यकताओं के अनुसार चलता है।

इस पुस्तकालय की मदद से हमें तर्क के माध्यम से शैलियों का प्रबंधन करने का अवसर मिलता है। नीचे दिए गए उदाहरण में, आपके पास यह चुनने का अवसर है कि आप किस रंग योजना को दूसरों को प्रभावित किए बिना अपने बटन पर असाइन करना चाहते हैं, जिससे आपके आवेदन में विविधता आए।

 import styled from "vue-styled-components"; const typeButton = { type: String, radius: Boolean }; const styleButton = type => { switch (type) { case "primary": return ` background-color: #FFFFFF; color: #0057AA; `; case "error": return ` background-color: #B4000B; color: #FDFDFD; `; case "success": return ` background-color: #00C887; color: #37435F; `; default: return ` background-color: #0057AA; color: #FFFFFF; `; } } const CButtonPropsCond = styled('button', typeButton)` font-size: 1em; text-align: center; padding: 10px 15px; border-radius: ${({ radius }) => radius ? "6px" : null}; ${(props) => styleButton(props.type)} `; export default CButtonPropsCond; 

इस बटन को बनाने की प्रक्रिया को बेहतर ढंग से समझाने के लिए: हम सबसे पहले (हमेशा) वीयू-स्टाइल-घटकों को आयात करते हैं, ठीक उसके बाद (पंक्ति 3 से लाइन 6 तक) हमें यह निर्धारित करने की आवश्यकता है कि घटक को किस प्रकार के गुणों को पारित किया जाएगा। पंक्ति 8 से 31 तक, हम एक फ़ंक्शन बनाते हैं जो प्रकार की संपत्ति का मूल्य लेता है, जो पारित किया गया था, उसके अनुसार यह पृष्ठभूमि की विशेषताओं को वापस करता है। रंग और उनके संबंधित रजिस्टर का रंग, यदि संपत्ति के रूप में कुछ भी पारित नहीं किया जाता है, तो बटन को डिफ़ॉल्ट मान सौंपा जाएगा।

इस ज्ञान के लिए धन्यवाद, आप नई विशेषताओं को लागू कर सकते हैं जो आपके कस्टम घटक को बहुत गतिशील बना देगा।

मैंने इन छोटे उदाहरणों को अपने GitHub में छोड़ दिया ताकि आप इस पुस्तकालय में महारत हासिल करने के लिए प्रारंभिक कदम उठा सकें। इसका आनंद लें।

उदाहरण के साथ रिपॉजिटरी से लिंक करें ।