ब्लूप्रिंट लाइब्रेरी का उपयोग करें और आपको फिर कभी एक आकर्षक, सुलभ वेबसाइट बनाने में संघर्ष नहीं करना पड़ेगा।
स्क्रैच से रिएक्ट एप्लिकेशन बनाना एक समय लेने वाला और चुनौतीपूर्ण कार्य हो सकता है, खासकर जब स्टाइलिंग घटकों की बात आती है। यहीं पर ब्लूप्रिंट यूआई टूलकिट काम आता है। टूलकिट पुन: प्रयोज्य यूआई घटकों का एक सेट है जो आपके रिएक्ट अनुप्रयोगों के लिए सुसंगत और दृश्यमान आकर्षक इंटरफेस बनाने में आपकी सहायता कर सकता है।
ब्लूप्रिंट यूआई टूलकिट की बुनियादी बातों के बारे में जानें और एक सरल रिएक्ट एप्लिकेशन बनाने के लिए इसका उपयोग कैसे करें।
ब्लूप्रिंट यूआई टूलकिट एक है रिएक्ट यूआई घटक लाइब्रेरी। इसमें पूर्व-निर्मित घटकों का संग्रह शामिल है जिनका उपयोग करना और अनुकूलित करना आसान है। आप इन पूर्व-डिज़ाइन किए गए घटकों का उपयोग बॉक्स से बाहर कर सकते हैं या अपनी विशिष्ट आवश्यकताओं के अनुरूप उन्हें संशोधित कर सकते हैं।
ब्लूप्रिंट यूआई टूलकिट के घटकों में बटन, फॉर्म, मॉडल, नेविगेशन और टेबल्स शामिल हैं। इन घटकों का उपयोग करने से आपका समय और प्रयास बच सकता है क्योंकि आपको प्रत्येक घटक को नए सिरे से डिजाइन और निर्माण नहीं करना पड़ता है।
ब्लूप्रिंट यूआई टूलकिट के साथ आरंभ करने के लिए, आपको इसकी आवश्यकता होगी एक रिएक्ट एप्लिकेशन बनाएं.
एक बार आपका प्रोजेक्ट सेट हो जाने पर, आप अपने द्वारा चुने गए किसी भी नोड पैकेज इंस्टॉलर का उपयोग करके ब्लूप्रिंट यूआई टूलकिट इंस्टॉल कर सकते हैं। एनपीएम का उपयोग करके ब्लूप्रिंट यूआई टूलकिट स्थापित करने के लिए, अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:
एनपीएम @ब्लूप्रिंटजेएस/कोर इंस्टॉल करें
इसके बजाय यार्न का उपयोग करने के लिए, यह कमांड चलाएँ:
यार्न @ब्लूप्रिंटजेएस/कोर जोड़ें
एक बार जब आप ब्लूप्रिंट यूआई टूलकिट स्थापित कर लेते हैं, तो आप अपने रिएक्ट एप्लिकेशन में अपनी पसंद के घटकों का उपयोग कर सकते हैं।
घटकों का उपयोग करने से पहले, ब्लूप्रिंट यूआई टूलकिट से सीएसएस फ़ाइलें शामिल करें:
@आयात"सामान्यीकरण.सीएसएस";
@आयात"@blueprintjs/core/lib/css/blueprint.css";
@आयात"@blueprintjs/icons/lib/css/blueprint-icons.css";
उपरोक्त कोड ब्लॉक को अपनी सीएसएस फ़ाइल में जोड़ने से ब्लूप्रिंट यूआई शैलियाँ इसके घटकों पर लागू होती हैं।
उदाहरण के लिए, अपने एप्लिकेशन में एक बटन जोड़ने के लिए, इसका उपयोग करें बटन ब्लूप्रिंट यूआई टूलकिट से घटक:
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { बटन } से"@ब्लूप्रिंटजेएस/कोर";समारोहअनुप्रयोग() {
वापस करना (
निर्यातगलती करना अनुप्रयोग;
यह कोड ब्लॉक आपके एप्लिकेशन में एक बटन जोड़ता है बटन अवयव। बटन घटक जैसे प्रॉप्स लेता है इरादा, मूलपाठ, आइकन, छोटा, और बड़ा.
इरादा प्रॉप बटन की प्रकृति को परिभाषित करता है, जो उसके पृष्ठभूमि रंग में प्रतिबिंबित होता है। इस उदाहरण में, बटन में एक है सफलता इरादा जो इसे हरा पृष्ठभूमि रंग देता है। ब्लूप्रिंट यूआई सहित कई मुख्य उद्देश्य प्रदान करता है प्राथमिक (नीला), सफलता (हरा), चेतावनी (नारंगी), और खतरा (लाल)।
आप बटन के अंदर दिखाई देने वाले टेक्स्ट को निर्दिष्ट कर सकते हैं मूलपाठ प्रोप. आप इसका उपयोग करके बटन में आइकन भी जोड़ सकते हैं आइकन प्रोप. साथ में आइकन प्रॉप है दायाँ चिह्न प्रोप, जो बटन के दाईं ओर आइकन जोड़ता है।
अंत में, बड़ा और छोटा बूलियन प्रॉप्स बटन का आकार निर्दिष्ट करते हैं। बड़ा प्रॉप बटन को बड़ा बनाता है, जबकि छोटा प्रोप इसे छोटा बनाता है।
पिछला कोड ब्लॉक एक बटन उत्पन्न करेगा जो इस तरह दिखेगा:
आप भी उपयोग कर सकते हैं एंकरबटन आपके एप्लिकेशन में एक बटन बनाने के लिए घटक। एंकरबटन घटक बटन घटक का एक विशेष संस्करण है जिसे स्पष्ट रूप से एक लिंक के रूप में उपयोग के लिए डिज़ाइन किया गया है।
यह घटक बटन घटक सहित कई समान प्रॉप्स को स्वीकार करता है मूलपाठ, बड़ा, छोटा, इरादा, और आइकन. यह भी स्वीकार करता है href और लक्ष्य सहारा.
href प्रोप उस यूआरएल को निर्दिष्ट करता है जिससे बटन लिंक होता है, और लक्ष्य प्रोप लिंक के लिए लक्ष्य विंडो या फ्रेम निर्दिष्ट करता है:
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { एंकरबटन } से"@ब्लूप्रिंटजेएस/कोर";समारोहअनुप्रयोग() {
वापस करना (
href=" https://example.com/"
इरादा="प्राथमिक"
पाठ="मुझे क्लिक करें"
लक्ष्य="_खाली"
/>
</div>
);
}
निर्यातगलती करना अनुप्रयोग;
उपरोक्त यह कोड ब्लॉक एक प्रस्तुत करता है एंकरबटन अवयव। अवयव href प्रोप मान है " https://example.com/” और यह लक्ष्य प्रोप मान "_blank" है जिसका अर्थ है कि लिंक किसी अन्य ब्राउज़र टैब या विंडो में खुलेगा।
ब्लूप्रिंट यूआई टूलकिट का एक अन्य आवश्यक घटक है कार्ड अवयव। यह एक पुन: प्रयोज्य घटक है जो आकर्षक दृश्य तरीके से जानकारी प्रदर्शित करता है।
कार्ड घटक दो प्रॉप्स लेता है इंटरएक्टिव और ऊंचाई. ऊंचाई प्रॉप कार्ड की छाया गहराई को नियंत्रित करता है, उच्च मान अधिक प्रमुख छाया प्रभाव उत्पन्न करते हैं।
इंटरएक्टिव प्रोप एक बूलियन मान स्वीकार करता है। जब सही पर सेट किया जाता है, तो यह कार्ड पर होवर और क्लिक इंटरैक्शन को सक्षम बनाता है, जिससे यह उपयोगकर्ता इनपुट पर प्रतिक्रिया दे सकता है।
उदाहरण के लिए:
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { कार्ड, ऊंचाई } से"@ब्लूप्रिंटजेएस/कोर";समारोहअनुप्रयोग() {
वापस करना (सत्य} ऊंचाई={ऊंचाई. दो}> यह एक कार्ड है</h2>
यह कुछ सामग्री है में मेरा कार्ड</p>
</Card>
</div>
);
}
निर्यातगलती करना अनुप्रयोग;
इस उदाहरण में, कार्ड घटक में एक शीर्षक और कुछ सामग्री होती है। इंटरएक्टिव प्रोप पर सेट है सत्य.
आप भी आयात करें ऊंचाई से घटक @ब्लूप्रिंटजेएस/कोर. ऊंचाई घटक एक एनम है जो पूर्वनिर्धारित मानों के एक सेट को परिभाषित करता है जिसका उपयोग आप किसी घटक की छाया गहराई निर्धारित करने के लिए कर सकते हैं।
यहाँ के उपलब्ध मूल्य हैं ऊंचाई enum:
- ऊंचाई। शून्य: यह मान छाया की गहराई को 0 पर सेट करता है, जो दर्शाता है कि घटक पर कोई लागू छाया नहीं है
- ऊंचाई। एक: यह मान छाया की गहराई को 1 पर सेट करता है।
- ऊंचाई। दो: यह मान छाया की गहराई को 2 पर सेट करता है।
- ऊंचाई। तीन: यह मान छाया की गहराई को 3 पर सेट करता है।
- ऊंचाई। चार: यह मान छाया की गहराई को 4 पर सेट करता है।
- ऊंचाई। पाँच: यह मान छाया की गहराई को 5 पर सेट करता है।
उपरोक्त कोड ब्लॉक को रेंडर करने पर आपकी स्क्रीन पर एक छवि प्रदर्शित होगी जो इस तरह दिखेगी:
ब्लूप्रिंट यूआई टूलकिट घटकों को अनुकूलित करना आसान है। आप पारंपरिक सीएसएस का उपयोग कर सकते हैं घटकों की उपस्थिति को संशोधित करने के लिए, या आप उनके व्यवहार को बदलने के लिए दिए गए प्रॉप्स का उपयोग कर सकते हैं।
उदाहरण के लिए, आप एक पास करके बटन के स्वरूप को अनुकूलित कर सकते हैं कक्षा का नाम सहारा:
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { बटन } से"@ब्लूप्रिंटजेएस/कोर";समारोहअनुप्रयोग() {
वापस करना (
निर्यातगलती करना अनुप्रयोग;
उपरोक्त कोड ब्लॉक बटन पर एक कस्टम क्लास लागू करता है, जिससे आप सीएसएस का उपयोग करके इसके स्वरूप को संशोधित कर सकते हैं:
.मेरा-बटन{
बॉर्डर-त्रिज्या: 10पिक्सल;
गद्दी: 0.4रेम 0.8रेम;
}
इन शैलियों को लागू करने से आपका बटन कुछ इस तरह दिखेगा:
ब्लूप्रिंट यूआई में और भी बहुत कुछ है
ब्लूप्रिंट यूआई ऊपर बताए गए घटकों की तुलना में अधिक घटक प्रदान करता है, जैसे अलर्ट, पॉपओवर, टोस्ट, आदि। हालाँकि, दी गई जानकारी से, आप ब्लूप्रिंट यूआई का उपयोग करके एक सरल रिएक्ट एप्लिकेशन बना सकते हैं।
आप विभिन्न तरीकों का उपयोग करके अपने रिएक्ट एप्लिकेशन को स्टाइल कर सकते हैं। आप जेएस लाइब्रेरी में पारंपरिक सीएसएस, एसएएसएस/एससीएसएस, टेलविंड सीएसएस और सीएसएस जैसे इमोशन, स्टाइल कंपोनेंट आदि का उपयोग कर सकते हैं।
