सरल, साफ़ यूआई तत्व आपके डिज़ाइन को ताज़ा कर सकते हैं और आपकी वेबसाइट या ऐप में गुणवत्ता का स्पर्श जोड़ सकते हैं।

ब्लूप्रिंट यूआई एक लोकप्रिय रिएक्ट यूआई टूलकिट है जो आधुनिक वेब अनुप्रयोगों के निर्माण के लिए पुन: प्रयोज्य घटकों और शैलियों का एक सेट प्रदान करता है। ब्लूप्रिंट यूआई की प्रमुख विशेषताओं में से एक पॉपओवर, अलर्ट और टोस्ट बनाने के लिए इसका समर्थन है, जो उपयोगकर्ताओं को जानकारी और फीडबैक प्रदर्शित करने के लिए आवश्यक घटक हैं।

ब्लूप्रिंट यूआई स्थापित करना

ब्लूप्रिंट यूआई के साथ आरंभ करने के लिए, आपको पहले इसे इंस्टॉल करना होगा। आप अपनी पसंद के किसी भी पैकेज मैनेजर का उपयोग करके ऐसा कर सकते हैं।

इसे इंस्टॉल करने के लिए एनपीएम, जावास्क्रिप्ट पैकेज मैनेजर, अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

एनपीएम @ब्लूप्रिंटजेएस/कोर इंस्टॉल करें

ब्लूप्रिंट यूआई स्थापित करने के बाद, आपको लाइब्रेरी से सीएसएस फ़ाइलें आयात करनी होंगी:

@आयात"सामान्यीकरण.सीएसएस";
@आयात"@blueprintjs/core/lib/css/blueprint.css";
@आयात"@blueprintjs/icons/lib/css/blueprint-icons.css";

इन फ़ाइलों को आयात करके, आप ब्लूप्रिंट यूआई शैलियों को ब्लूप्रिंट यूआई ऑफ़र वाले घटकों के साथ एकीकृत करने में सक्षम होंगे।

ब्लूप्रिंट यूआई का उपयोग करके पॉपओवर बनाना

पॉपओवर टूलटिप्स हैं जो तब दिखाई देते हैं जब उपयोगकर्ता किसी तत्व पर होवर करता है या क्लिक करता है। वे उपयोगकर्ता को अतिरिक्त जानकारी या विकल्प प्रदान करते हैं।

ब्लूप्रिंट यूआई का उपयोग करके अपने रिएक्ट एप्लिकेशन में पॉपओवर बनाने के लिए, आपको ब्लूप्रिंट यूआई इंस्टॉल करना होगा पॉपओवर2 अवयव।

ऐसा करने के लिए, अपने टर्मिनल में निम्नलिखित कोड चलाएँ:

एनपीएम इंस्टाल --सेव @ब्लूप्रिंटजेएस/पॉपओवर2

अपनी सीएसएस फ़ाइल में पैकेज स्टाइलशीट आयात करना सुनिश्चित करें:

@आयात"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

स्टाइलशीट आयात करने के बाद, आप इसका उपयोग कर सकते हैं पॉपओवर2 आपके एप्लिकेशन में पॉपओवर बनाने के लिए घटक।

उदाहरण के लिए:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { बटन } से"@ब्लूप्रिंटजेएस/कोर";
आयात { पॉपओवर2 } से"@ब्लूप्रिंटजेएस/पॉपओवर2";
समारोहअनुप्रयोग() {
कॉन्स्ट पॉपओवरकंटेंट = (




पॉपओवर शीर्षक</h3>




यह पॉपओवर के अंदर की सामग्री है।</p>
 </div>
 );


वापस करना (









निर्यातगलती करना अनुप्रयोग;

यह कोड का उपयोग करके एक पॉपओवर बनाता है पॉपओवर2 अवयव। यह एक को भी परिभाषित करता है पॉपओवर सामग्री वैरिएबल, जिसमें पॉपओवर सामग्री के लिए JSX कोड शामिल है।

पॉपओवर2 घटक लेता है पॉपओवर सामग्री इसके मूल्य के रूप में संतुष्ट प्रोप. संतुष्ट प्रॉप पॉपओवर के भीतर प्रदर्शित सामग्री को निर्दिष्ट करता है। यहां ही पॉपओवर2 घटक लपेटता है a बटन अवयव। जब आप बटन पर क्लिक करते हैं तो यह पॉपओवर प्रदर्शित करता है।

पॉपओवर सरल दिखता है, जैसा कि यहां दिखाया गया है:

आप पास करके पॉपओवर सामग्री को स्टाइल कर सकते हैं कक्षा का नाम के लिए सहारा पॉपओवर सामग्री जेएसएक्स कोड:

कॉन्स्ट पॉपओवरकंटेंट = (
'जल्दी सेना'>
पॉपओवर शीर्षक</h3>




यह पॉपओवर के अंदर की सामग्री है।</p>
 </div>
);

फिर आप अपनी सीएसएस फ़ाइल में सीएसएस वर्ग को परिभाषित कर सकते हैं:

।जल्दी सेना {
गद्दी: 1रेम;
पृष्ठभूमि का रंग: #e2e2e2;
फुहारा परिवार: कर्सिव;
}

अब पॉपओवर थोड़ा बेहतर दिखना चाहिए:

पॉपओवर2 घटक कुछ प्रॉप्स लेता है जो आपकी आवश्यकताओं के अनुरूप इसे कॉन्फ़िगर करने में आपकी सहायता करेंगे। इनमें से कुछ प्रॉप्स हैं पॉपओवरक्लासनाम, onइंटरैक्शन, खुला है, कम से कम, और प्लेसमेंट.

प्लेसमेंट प्रोप लक्ष्य तत्व के सापेक्ष पॉपओवर की पसंदीदा स्थिति निर्धारित करता है। इसके उपलब्ध मूल्य हैं:

  • ऑटो
  • ऑटो स्टार्ट
  • स्वतः समाप्ति
  • ऊपर
  • शीर्ष-प्रारंभ
  • उच्च श्रेणी व गुणवत्ता का उत्पाद
  • तल
  • निचली शुरुआत
  • निचले तल का हिस्सा
  • सही
  • सही शुरुआत
  • सही अंत
  • बाएं
  • बाएँ-शुरुआत
  • बाएं अंत

साथ पॉपओवरक्लासनाम, आप पॉपओवर तत्व के लिए CSS क्लास नाम परिभाषित कर सकते हैं। प्रोप का उपयोग करने के लिए आप सबसे पहले अपनी सीएसएस फ़ाइल में एक सीएसएस क्लास बनाएंगे।

उदाहरण के लिए:

.कस्टम-पॉपओवर {
पृष्ठभूमि का रंग: #e2e2e2;
डब्बे की छाया: 0 10पिक्सल 15पिक्सल-3pxआरजीबी(0 0 0 / 0.1);
बॉर्डर-त्रिज्या: 12पिक्सल;
गद्दी: 1रेम;
}

CSS क्लास बनाने के बाद, इसका उपयोग करें पॉपओवरक्लासनाम Popover2 घटक पर कस्टम शैली लागू करने के लिए प्रोप:

 सामग्री={popoverContent}
 प्लेसमेंट="निचले तल का हिस्सा"
 पॉपओवरक्लासनाम="कस्टम-पॉपओवर"
 न्यूनतम={सत्य}
>

कम से कम प्रॉप पॉपओवर की शैली को नियंत्रित करता है। प्रोप एक बूलियन मान स्वीकार करता है। यदि सही पर सेट किया जाता है, तो पॉपओवर में न्यूनतम स्टाइल, कोई तीर नहीं और एक साधारण बॉक्स उपस्थिति होगी।

अलर्ट बनाना

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

ब्लूप्रिंट यूआई में अलर्ट बनाना समान है चक्र यूआई का उपयोग करके अलर्ट बनाना. आप ब्लूप्रिंट यूआई का उपयोग करके अपने रिएक्ट एप्लिकेशन में अलर्ट बनाने के लिए अलर्ट घटक का उपयोग करेंगे।

यहाँ एक उदाहरण है:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {अलर्ट, बटन } से"@ब्लूप्रिंटजेएस/कोर";
समारोहअनुप्रयोग() {
कॉन्स्ट [isOpen, setIsOpen] = React.useState(असत्य);


कॉन्स्ट हैंडलओपन = () => {
 सेटइज़ओपन(सत्य);
 };


कॉन्स्ट हैंडल बंद करें = () => {
 सेटइज़ओपन(असत्य);
 };


वापस करना (




"बंद करना">
यह एक चेतावनी संदेश है</p>
 </Alert>




निर्यातगलती करना अनुप्रयोग;

यह उदाहरण दिखाता है कि आपको कैसे आयात करना चाहिए चेतावनी से घटक @ब्लूप्रिंटजेएस/कोर पैकेट। चेतावनी घटक स्क्रीन पर एक चेतावनी संदेश प्रस्तुत करता है। इसमें तीन सहारा भी लगते हैं: खुला है, चालूबंद करें, और कन्फ़र्मबटनटेक्स्ट.

खुला है प्रॉप यह निर्धारित करता है कि अलर्ट दिखाई दे रहा है या नहीं। अलर्ट प्रदर्शित करने के लिए इसे सही पर सेट करें और इसे छिपाने के लिए गलत पर सेट करें। चालूबंद करें प्रोप एक कॉलबैक फ़ंक्शन है जो तब चलता है जब कोई उपयोगकर्ता अलर्ट बंद करता है।

अंत में, कन्फ़र्मबटनटेक्स्ट प्रोप पुष्टिकरण बटन पर प्रदर्शित पाठ को निर्धारित करता है।

इस उदाहरण में अलर्ट अधिसूचना इस तरह दिखेगी:

ब्लूप्रिंट यूआई के साथ टोस्ट बनाना

टोस्ट ऐसी सूचनाएं हैं जो उपयोगकर्ता को महत्वपूर्ण जानकारी या घटनाओं के बारे में सूचित करने के लिए स्क्रीन पर दिखाई देती हैं। वे अलर्ट के समान हैं लेकिन आम तौर पर कम दखल देने वाले होते हैं और जल्दी से गायब हो जाते हैं।

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

उदाहरण के लिए:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { ओवरलेटोस्टर, बटन } से"@ब्लूप्रिंटजेएस/कोर";
कॉन्स्ट toasterInstance = OverlayToaster.create({ पद: "ठीक तरह से ऊपर" });


समारोहअनुप्रयोग() {
कॉन्स्ट शोटोस्ट = () => {
 toasterInstance.show({
 संदेश: "यह एक टोस्ट है",
 इरादा: "प्राथमिक",
 समय समाप्त: 3000,
 बंद करेंबटनदिखाया गया है: असत्य,
 आइकन: "बुकमार्क",
 });
 };


वापस करना (






निर्यातगलती करना अनुप्रयोग;

उपरोक्त कोड ब्लॉक का उपयोग करता है OverlayToaster.create टोस्टर उदाहरण उत्पन्न करने की विधि और इसका उपयोग करके इसकी स्थिति निर्दिष्ट करती है पद प्रोप.

यह फ़ंक्शन को भी परिभाषित करता है शोटोस्ट. यह फ़ंक्शन का उपयोग करता है दिखाना की विधि टोस्टरइंस्टेंस बुलाए जाने पर टोस्ट प्रदर्शित करने के लिए। दिखाना विधि किसी वस्तु को साथ ले जाती है संदेश, इरादा, समय समाप्त, क्लोज़बटनदिखाया गया है, और आइकन सहारा.

संदेश प्रॉप टोस्ट की पाठ्य सामग्री को निर्दिष्ट करता है, जबकि इरादा प्रॉप टोस्ट के प्रकार को निर्दिष्ट करता है। टोस्ट की शैली उसके मूल्य के आधार पर अलग-अलग होगी।

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

जब आप बटन पर क्लिक करेंगे तो उपरोक्त कोड ब्लॉक एक सुंदर टोस्ट उत्पन्न करेगा, जैसा कि नीचे दी गई छवि में देखा गया है।

यदि आप अपने रिएक्ट एप्लिकेशन में आकर्षक टोस्ट नोटिफिकेशन बनाना चाह रहे हैं, तो ब्लूप्रिंट यूआई एक बढ़िया विकल्प है। यह पूर्वनिर्धारित घटकों की एक विस्तृत श्रृंखला प्रदान करता है जिनका उपयोग आप अपने एप्लिकेशन की शैली से मेल खाने वाली सूचनाएं बनाने के लिए कर सकते हैं।

हालाँकि, यदि आप एक छोटे प्रोजेक्ट पर काम कर रहे हैं जिसके लिए ब्लूप्रिंट यूआई की सभी सुविधाओं की आवश्यकता नहीं है, रिएक्ट टोस्टिफ़ाई सुंदर सूचनाएं बनाने का एक हल्का विकल्प है.

टोस्ट, पॉपओवर और अलर्ट के साथ उपयोगकर्ता अनुभव को बढ़ाना

आपने ब्लूप्रिंट यूआई का उपयोग करके अपने रिएक्ट एप्लिकेशन में पॉपओवर, अलर्ट और टोस्ट बनाना सीख लिया है। ये घटक उपयोगकर्ताओं को जानकारी और फीडबैक प्रदान करने के लिए आवश्यक हैं और आपके एप्लिकेशन के उपयोगकर्ता अनुभव को महत्वपूर्ण रूप से बढ़ा सकते हैं। आप न्यूनतम प्रयास और अनुकूलन के साथ प्राप्त जानकारी का उपयोग करके इन घटकों को आसानी से बना सकते हैं।