रिएक्ट के साथ एक एक्सेसिबल प्रोग्रेस बार कैसे बनाएं

प्रगति बार उपयोगकर्ता के जुड़ाव के लिए बहुत अच्छे हैं क्योंकि वे प्राप्त करने के लिए एक लक्ष्य प्रदान करते हैं। एक संसाधन पर प्रतीक्षा कर रहे एक वेब पेज पर घूरने के बजाय, आप एक प्रगति बार को भरते हुए देखते हैं। प्रोग्रेस बार केवल देखने वाले उपयोगकर्ताओं तक ही सीमित नहीं होना चाहिए। हर किसी को आपके प्रोग्रेस बार को आसानी से समझने में सक्षम होना चाहिए।

तो आप रिएक्ट के साथ एक सुलभ प्रगति पट्टी कैसे बना सकते हैं?

एक प्रगति बार घटक बनाएँ

प्रोग्रेसबार.जेएस नामक एक नया घटक बनाएं और निम्नलिखित कोड जोड़ें:

कॉन्स्ट प्रोग्रेसबार = ({प्रगति}) => {
वापस करना (
<डिव>
<डिव भूमिका ="प्रोगेस बार"
 आरिया-मान अब = {प्रगति}
 एरिया-वैल्यूमिन = {0}
 aria-valuemax={100}>
<अवधि>{`${प्रगति}%`}</span>
</div>
</div>
 );
};
निर्यातगलती करना प्रोगेस बार;

पहला div तत्व कंटेनर है और दूसरा div वास्तविक प्रगति बार है। स्पैन तत्व प्रगति बार प्रतिशत रखता है।

अभिगम्यता उद्देश्यों के लिए, दूसरे डिव में निम्नलिखित विशेषताएं हैं:

• प्रोग्रेसबार की भूमिका।
• aria-valuenow प्रगति पट्टी के वर्तमान मान को इंगित करने के लिए।
• aria-valuemin प्रगति पट्टी के न्यूनतम मूल्य को इंगित करने के लिए।
• प्रगति पट्टी के अधिकतम मूल्य को इंगित करने के लिए aria-Valuemax।

aria-valuemin और aria-valuemax विशेषताएँ आवश्यक नहीं हैं यदि प्रगति बार अधिकतम और न्यूनतम मान 0 और 100 हैं क्योंकि HTML इन मानों के लिए डिफ़ॉल्ट है।

प्रोग्रेस बार को स्टाइल करना

आप इनलाइन शैलियों का उपयोग करके प्रगति पट्टी को शैलीबद्ध कर सकते हैं या a CSS-in-JS लाइब्रेरी जैसे स्टाइल-घटक. ये दोनों दृष्टिकोण घटक से CSS तक प्रॉप पास करने का एक सरल तरीका प्रदान करते हैं।

आपको इस कार्यक्षमता की आवश्यकता है क्योंकि प्रगति पट्टी की चौड़ाई प्रॉपर के रूप में पारित प्रगति मूल्य पर निर्भर करती है।

आप इन इनलाइन शैलियों का उपयोग कर सकते हैं:

कॉन्स्ट कंटेनर = {
 ऊंचाई: 20,
 चौड़ाई: "100%",
 पृष्ठभूमि का रंग: "#फफ्फ",
 सीमा-त्रिज्या: 50,
 मार्जिन: 50
}
कॉन्स्ट बार = {
 ऊंचाई: "100%",
 चौड़ाई: `${प्रगति}%`,
 पृष्ठभूमि का रंग: "#90CAF9",
 सीमात्रिज्या: "इनहेरिट",
}
कॉन्स्ट लेबल = {
 गद्दी: "1 रेम",
 रंग: "#000000",
}

शैलियों को शामिल करने के लिए घटक के वापसी भाग को संशोधित करें जैसा कि नीचे दिखाया गया है:

<div शैली = {कंटेनर}>
<div शैली = {बार} भूमिका ="प्रोगेस बार"
 आरिया-मान अब = {प्रगति}
 एरिया-वैल्यूमिन = {0}
 aria-valuemax={100}>
<स्पैन स्टाइल = {लेबल} >{`${प्रगति}%`}</span>
</div>
</div>

प्रगति पट्टी को इस तरह प्रस्तुत करें:

<प्रोग्रेसबार प्रगति ={50}/>

यह 50 प्रतिशत पूर्ण के साथ एक प्रगति बार प्रदर्शित करता है।

रिएक्ट में बिल्डिंग कंपोनेंट्स

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