स्वाइपर के साथ अपने रिएक्ट एप्लिकेशन में स्वाइप करने योग्य इंटरफ़ेस कैसे बनाएं

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

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

स्विपर स्थापित करना

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

एनपीएम स्वाइपर स्थापित करें

एक बार जब आप स्वाइपर इंस्टॉल कर लेते हैं तो आप इसे अपने एप्लिकेशन में उपयोग कर सकते हैं।

स्वाइप करने योग्य इंटरफ़ेस बनाना

अपने रिएक्ट एप्लिकेशन में स्वाइपर इंस्टॉल करने के बाद, आप स्वाइप करने योग्य इंटरफेस बना सकते हैं। आयात करके प्रारंभ करें हिट मारने वाला और स्वाइपरस्लाइड स्वाइपर लाइब्रेरी से घटक।

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

यहां स्वाइपर और स्वाइपरस्लाइड घटकों का उपयोग करके स्वाइप करने योग्य इंटरफ़ेस का एक उदाहरण दिया गया है:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {स्वाइपर, स्वाइपरस्लाइड} से"स्वाइपर/प्रतिक्रिया";
आयात'स्वाइपर/सीएसएस';
समारोहअनुप्रयोग() {
वापस करना (




<डिवकक्षा का नाम='तत्व'>तत्व 1डिव></SwiperSlide>
<डिवकक्षा का नाम='तत्व'>तत्व 2डिव></SwiperSlide>
<डिवकक्षा का नाम='तत्व'>तत्व 3डिव></SwiperSlide>
<डिवकक्षा का नाम='तत्व'>तत्व 4डिव></SwiperSlide>
 </Swiper>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

निम्न के अलावा हिट मारने वाला और स्वाइपरस्लाइड घटकों, यह कोड ब्लॉक का उपयोग करके स्वाइपर के लिए डिफ़ॉल्ट स्टाइल शीट आयात करता है स्वाइपर/सीएसएस मापांक।

उदाहरण तब एक स्वाइपर घटक को चार स्वाइपरस्लाइड चाइल्ड घटकों के चारों ओर लपेटता है। प्रत्येक स्वाइपरस्लाइड में एक होता है डिव के साथ तत्व कक्षा का नाम गुण। आप div तत्वों को स्टाइल करने के लिए className का उपयोग कर सकते हैं:

।तत्व {
इनलाइन-आकार: 100पिक्सल;
बॉर्डर-त्रिज्या: 12पिक्सल;
गद्दी: 1रेम;
रंग: #333333;
पृष्ठभूमि का रंग: #e2e2e2;
फुहारा परिवार: कर्सिव;
}

अपने स्वाइप करने योग्य इंटरफ़ेस को अनुकूलित करना

सफलतापूर्वक स्वाइप करने योग्य इंटरफ़ेस बनाने के बाद, आप अपनी आवश्यकताओं के अनुरूप इसकी उपस्थिति और कार्यक्षमता को बढ़ा सकते हैं।

स्वाइपर के साथ, आप विभिन्न विकल्पों का उपयोग करके इंटरफ़ेस के व्यवहार और स्वरूप को अनुकूलित कर सकते हैं। आप इन विकल्पों को पास करें हिट मारने वाला घटक के रूप में प्रतिक्रिया में सहारा:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {स्वाइपर, स्वाइपरस्लाइड} से"स्वाइपर/प्रतिक्रिया";
आयात'स्वाइपर/सीएसएस';
समारोहअनुप्रयोग() {
वापस करना (



 अंतरिक्षबीच={30}
 स्लाइड्सपरव्यू={2}
 लूप={ सत्य }
 >
<डिवकक्षा का नाम='तत्व'>तत्व 1डिव></SwiperSlide>
<डिवकक्षा का नाम='तत्व'>तत्व 2डिव></SwiperSlide>
<डिवकक्षा का नाम='तत्व'>तत्व 3डिव></SwiperSlide>
<डिवकक्षा का नाम='तत्व'>तत्व 4डिव></SwiperSlide>
 </Swiper>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

इस उदाहरण में, स्वाइपर घटक तीन प्रॉप्स लेता है: बीच का स्थान, स्लाइड्सपरव्यू, और कुंडली। बीच का स्थान प्रोप प्रत्येक स्लाइड के बीच का स्थान निर्धारित करता है, इस मामले में 30 पिक्सेल।

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

अंत में, कुंडली प्रॉप निर्दिष्ट करता है कि स्लाइड्स को अनंत रूप से लूप करना चाहिए या नहीं। इस उदाहरण में, स्लाइड्स अनंत रूप से लूप करेंगी क्योंकि कुंडली प्रोप वैल्यू है सत्य.

मॉड्यूल के साथ अपने स्वाइप करने योग्य इंटरफ़ेस को कॉन्फ़िगर करना

आप अपने स्वाइप करने योग्य इंटरफ़ेस के व्यवहार को और अधिक कॉन्फ़िगर कर सकते हैं जावास्क्रिप्ट मॉड्यूल स्वाइपर लाइब्रेरी द्वारा प्रदान किया गया। इसके द्वारा प्रदान किए जाने वाले कुछ मॉड्यूल हैं मार्गदर्शन, स्वत: प्ले, पृष्ठ पर अंक लगाना, और स्क्रॉल बार.

अपने एप्लिकेशन में इनमें से किसी भी मॉड्यूल का उपयोग करने के लिए, आपको उन्हें स्वाइपर लाइब्रेरी से आयात करना होगा। आपको मॉड्यूल के लिए संबंधित सीएसएस शैलियों को भी आयात करना चाहिए और उनके नाम पास करना चाहिए हिट मारने वाला घटक का उपयोग कर रहा है मॉड्यूल प्रोप.

उदाहरण के लिए, आप इसका उपयोग इस प्रकार कर सकते हैं मार्गदर्शन आपके स्वाइप करने योग्य इंटरफ़ेस को कॉन्फ़िगर करने के लिए मॉड्यूल:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {स्वाइपर, स्वाइपरस्लाइड } से"स्वाइपर/प्रतिक्रिया";
आयात { मार्गदर्शन } से"स्वाइपर";
आयात"स्वाइपर/सीएसएस";
आयात"स्वाइपर/सीएसएस/नेविगेशन";
समारोहअनुप्रयोग() {
वापस करना (



 अंतरिक्षबीच={30}
 स्लाइड्सपरव्यू={2}
 मॉड्यूल={[नेविगेशन]}
 लूप={सत्य}
 नेविगेशन={सत्य}
 >
<डिवकक्षा का नाम="तत्व">तत्व 1डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 2डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 3डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 4डिव></SwiperSlide>
 </Swiper>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह कोड ब्लॉक आयात करता है मार्गदर्शन मॉड्यूल और इसकी सीएसएस शैली, फिर मॉड्यूल को निर्दिष्ट करता है मॉड्यूल का सहारा हिट मारने वाला अवयव। मॉड्यूल प्रोप स्वाइपर लाइब्रेरी द्वारा प्रदान किए गए मॉड्यूल को सक्षम और कॉन्फ़िगर करता है।

नेविगेशन मॉड्यूल स्वाइपर घटक को नेविगेशन कार्यक्षमता प्रदान करता है। यह पिछले और अगले तीर बटन जोड़ता है जिन्हें आप पिछली या अगली स्लाइड पर जाने के लिए क्लिक या टैप कर सकते हैं।

मार्गदर्शन प्रोप मान सत्य है जिसके कारण पिछले और अगले बटन स्क्रीन पर प्रदर्शित होंगे।

ऑटोप्ले के साथ स्वाइप करने योग्य इंटरफेस को कॉन्फ़िगर करना

स्वत: प्ले मॉड्यूल स्लाइडर को उपयोगकर्ता की सहभागिता के बिना स्लाइडों के बीच स्वचालित रूप से संक्रमण करने की अनुमति देता है।

इसका उपयोग करके अपने स्वाइप करने योग्य इंटरफ़ेस को कॉन्फ़िगर करने का एक उदाहरण यहां दिया गया है स्वत: प्ले मापांक:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {स्वाइपर, स्वाइपरस्लाइड } से"स्वाइपर/प्रतिक्रिया";
आयात { स्वत: प्ले } से"स्वाइपर";
आयात"स्वाइपर/सीएसएस";
आयात"स्वाइपर/सीएसएस/ऑटोप्ले";
समारोहअनुप्रयोग() {
वापस करना (



 अंतरिक्षबीच={30}
 स्लाइड्सपरव्यू={2}
 मॉड्यूल={[ऑटोप्ले]}
 लूप={सत्य}
 ऑटोप्ले={{ देरी: 3000 }}
 >
<डिवकक्षा का नाम="तत्व">तत्व 1डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 2डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 3डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 4डिव></SwiperSlide>
 </Swiper>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

का उपयोग स्वत: प्ले प्रोप, आप निर्दिष्ट कर सकते हैं देरी; इस स्थिति में, यह 3000 मिलीसेकंड पर सेट है।

पेजिनेशन के साथ स्वाइप करने योग्य इंटरफेस को कॉन्फ़िगर करना

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

का उपयोग करने के लिए पृष्ठ पर अंक लगाना मॉड्यूल, आपको इसे आयात करने और इसमें शामिल करने की आवश्यकता है मॉड्यूल का सहारा हिट मारने वाला अवयव:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {स्वाइपर, स्वाइपरस्लाइड } से"स्वाइपर/प्रतिक्रिया";
आयात { पेजिनेशन } से"स्वाइपर";
आयात"स्वाइपर/सीएसएस";
आयात"स्वाइपर/सीएसएस/पेजिनेशन";
समारोहअनुप्रयोग() {
वापस करना (



 अंतरिक्षबीच={30}
 स्लाइड्सपरव्यू={2}
 मॉड्यूल={[पृष्ठांकन]}
 लूप={सत्य}
 पेजिनेशन={{ क्लिक करने योग्य: सत्य }}
 >
<डिवकक्षा का नाम="तत्व">तत्व 1डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 2डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 3डिव></SwiperSlide>
<डिवकक्षा का नाम="तत्व">तत्व 4डिव></SwiperSlide>
 </Swiper>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह कोड ब्लॉक पेजिनेशन कार्यक्षमता प्रदान करता है पृष्ठ पर अंक लगाना मापांक। यह उपयोगकर्ताओं को क्लिक करने की भी अनुमति देता है पृष्ठ पर अंक लगाना सेट करके गोलियाँ क्लिक करने योग्य की संपत्ति पृष्ठ पर अंक लगाना सच की ओर सहारा.

स्वाइपर लाइब्रेरी के अलावा पृष्ठ पर अंक लगाना मापांक, प्रतिक्रिया-पृष्ठांकन करें आपके रिएक्ट एप्लिकेशन में पेजिनेशन बनाने के लिए एक और उत्कृष्ट विकल्प है।

प्रतिक्रिया के साथ सुलभ अनुप्रयोगों का निर्माण

स्वाइप करने योग्य इंटरफ़ेस टचस्क्रीन उपयोगकर्ताओं के लिए आपके एप्लिकेशन के उपयोगकर्ता अनुभव को बेहतर बनाते हैं। स्वाइपर काफी लचीलापन प्रदान करता है और आप इसे अपने ऐप की जरूरतों के अनुसार आसानी से अनुकूलित कर सकते हैं।

विभिन्न यूआई लाइब्रेरी आपके रिएक्ट एप्लिकेशन को अधिक सुलभ बनाने में मदद कर सकती हैं। ये लाइब्रेरी ऐसी सुविधाएँ और कार्यक्षमता प्रदान करती हैं जो आपके एप्लिकेशन के उपयोगकर्ता अनुभव को बढ़ाती हैं।