कई आधुनिक वेब डिज़ाइनों के लिए एक उत्तरदायी पादलेख की आवश्यकता होती है जो अच्छा दिखता है और सभी उपकरणों पर ठीक से काम करता है। एक उत्तरदायी पादलेख स्वचालित रूप से अपने लेआउट और सामग्री को उस डिवाइस के स्क्रीन आकार में फिट करने के लिए समायोजित करता है जिस पर इसे देखा जा रहा है।
सरल-प्रतिक्रिया-पाद लेख मॉड्यूल का उपयोग करके React.js में एक उत्तरदायी पाद लेख बनाना सीखें।
सरल-प्रतिक्रिया-पाद लेख मॉड्यूल एक हल्का और उपयोग में आसान पुस्तकालय है जो आपको React.js में एक उत्तरदायी पादलेख बनाने की अनुमति देता है। यह प्रॉप्स का एक सेट प्रदान करता है जिसका उपयोग आप अपने फुटर की उपस्थिति और कार्यक्षमता को अनुकूलित करने के लिए कर सकते हैं।
सरल-प्रतिक्रिया-पाद लेख मॉड्यूल का उपयोग करके एक पाद लेख बनाने में गोता लगाने से पहले, आइए इसकी कुछ प्रमुख विशेषताओं पर एक नज़र डालें:
- अनुकूलन योग्य लेआउट: सरल-प्रतिक्रिया-पाद लेख मॉड्यूल आपको अपने पादलेख में स्तंभों की संख्या, साथ ही प्रत्येक स्तंभ की सामग्री को परिभाषित करने की अनुमति देता है।
- उत्तरदायी आकार: जिस डिवाइस पर इसे देखा जा रहा है, उसके स्क्रीन आकार को फिट करने के लिए फुटर स्वचालित रूप से अपने लेआउट को समायोजित करता है।
- अनुकूलन उपस्थिति: सिंपल-रिएक्शन-फ़ुटर मॉड्यूल प्रॉप्स की एक श्रृंखला प्रदान करता है जिसका उपयोग आप अपने फ़ुटर की उपस्थिति को अनुकूलित करने के लिए कर सकते हैं, जैसे कि पृष्ठभूमि का रंग, फ़ॉन्ट का रंग और आइकन का रंग।
अब जबकि आपको simple-react-footer मॉड्यूल की बुनियादी समझ हो गई है, तो आइए देखें कि आप React.js में एक फूटर बनाने के लिए इसका उपयोग कैसे कर सकते हैं।
से शुरू एक साधारण रिएक्ट ऐप बनाना. फिर आप एक पाद लेख बनाने के लिए simple-react-footer मॉड्यूल का उपयोग कर सकते हैं, जैसा कि इस उदाहरण में है:
आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात सिंपलरिएक्टफूटर से'सरल-प्रतिक्रिया-पाद लेख';कॉन्स्ट पाद = () => {
// पाद लेख के लिए डेटा परिभाषित करें
कॉन्स्ट विवरण = "लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटुर एडिपिसिंग एलीट, सेड डो इयूस्मोड टेम्पोर इंसिडेंट यूट लेबोर एट डोलोरे मैग्ना एलिक्वा। यूट एनिम एड मिनिम वेनियम, क्विस नॉस्ट्रड एक्सरसाइज उल्लाम्को लेबोरिस निसि यूट एलिक्विप एक्स ईए कमोडो परिणाम।";
कॉन्स्ट शीर्षक = "लोरेम इप्सम";कॉन्स्ट स्तंभ = [{
शीर्षक: "कॉलम 1",
संसाधन: [{
नाम: "वस्तु 1",
जोड़ना: "/वस्तु 1"
},{
नाम: "आइटम 2",
जोड़ना: "/आइटम2"
},{
नाम: "आइटम 3",
जोड़ना: "/आइटम3"
},{
नाम: "आइटम 4",
जोड़ना: "/आइटम4"
}]
},{
शीर्षक: "कॉलम 2",
संसाधन: [{
नाम: "आइटम 5",
जोड़ना: "/आइटम5"
},{
नाम: "आइटम 6",
जोड़ना: "/आइटम6"
}]
},{
शीर्षक: "कॉलम 3",
संसाधन: [{
नाम: "आइटम 7",
जोड़ना: "/आइटम7"
},{
नाम: "आइटम 8",
जोड़ना: "/आइटम8"
}]
}];वापस करना<सिंपलरिएक्टफूटर
विवरण = {विवरण}
शीर्षक = {शीर्षक}
कॉलम = {कॉलम}
/>;
}
निर्यातगलती करना पाद;
वह कोड इस तरह दिखने वाला एक पाद लेख बनाएगा:
यह उदाहरण SimpleReactFooter घटक को आयात करता है और पाद नामक एक कार्यात्मक घटक को परिभाषित करता है। पाद लेख घटक के अंदर, यह SimpleReactFooter घटक का उपयोग करता है, इसे तीन प्रॉप्स पास करता है: शीर्षक, विवरण और कॉलम।
मॉड्यूल पाद लेख के शीर्ष पर शीर्षक प्रोप प्रदर्शित करता है। उसके नीचे, यह टाइटल प्रॉप दिखाता है। अंत में, कॉलम प्रोप ऑब्जेक्ट्स की एक सरणी है जो फ़ुटर में कॉलम की सामग्री को परिभाषित करता है।
विभिन्न प्रॉप्स के साथ घटकों को अनुकूलित करना
साथ ही शीर्षक और विवरण प्रोप, सरल-प्रतिक्रिया-पाद लेख मॉड्यूल कई प्रदान करता है सहारा जो आप घटक को पास कर सकते हैं. आप अपने पाद लेख की उपस्थिति और कार्यक्षमता को अनुकूलित करने के लिए इनका उपयोग कर सकते हैं।
यहाँ simple-react-footer मॉड्यूल में उपलब्ध सभी प्रॉप्स की सूची दी गई है:
- शीर्षक: पाद लेख का शीर्षक।
- विवरण: पाद लेख का संक्षिप्त विवरण।
- स्तंभ: वस्तुओं की एक सरणी जो पादलेख में कॉलम की सामग्री को परिभाषित करती है। प्रत्येक वस्तु में एक शीर्षक गुण होना चाहिए जो स्तंभ के शीर्षक को निर्दिष्ट करता है और एक संसाधन गुण जो वस्तुओं की एक सरणी है, प्रत्येक स्तंभ में एक संसाधन का प्रतिनिधित्व करता है। प्रत्येक संसाधन वस्तु में एक नाम गुण होना चाहिए जो संसाधन का नाम निर्दिष्ट करता है और एक लिंक गुण जो संसाधन के लिंक को निर्दिष्ट करता है।
- लिंक्डइन: कंपनी या संगठन का लिंक्डइन हैंडल।
- फेसबुक: कंपनी या संगठन का फेसबुक हैंडल।
- ट्विटर: कंपनी या संगठन का ट्विटर हैंडल।
- इंस्टाग्राम: कंपनी या संगठन का Instagram हैंडल।
- यूट्यूब: कंपनी या संगठन का YouTube हैंडल।
- Pinterest: कंपनी या संगठन का Pinterest हैंडल।
- कॉपीराइट: पाद लेख के लिए कॉपीराइट पाठ।
- चिह्न रंग: पाद लेख में सोशल मीडिया आइकन का रंग।
- पृष्ठभूमि का रंग: पाद का पृष्ठभूमि रंग।
- लिपि का रंग: पाद का फ़ॉन्ट रंग।
- कॉपीराइट रंग: पाद लेख में कॉपीराइट पाठ का फ़ॉन्ट रंग।
यहाँ एक उदाहरण दिया गया है कि आप कैसे React.js में एक अनुकूलित पाद लेख बनाने के लिए सरल-प्रतिक्रिया-पाद लेख मॉड्यूल में उपलब्ध सभी प्रॉप्स का उपयोग कर सकते हैं:
आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात सिंपलरिएक्टफूटर से'सरल-प्रतिक्रिया-पाद लेख';कॉन्स्ट पाद = () => {
// पाद लेख के लिए डेटा परिभाषित करें
कॉन्स्ट विवरण = "लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटुर एडिपिसिंग एलीट, सेड डो इयूस्मोड टेम्पोर इंसिडेंट यूट लेबोर एट डोलोरे मैग्ना एलिक्वा। यूट एनिम एड मिनिम वेनियम, क्विस नॉस्ट्रड एक्सरसाइज उल्लाम्को लेबोरिस निसि यूट एलिक्विप एक्स ईए कमोडो परिणाम।";
कॉन्स्ट शीर्षक = "लोरेम इप्सम";कॉन्स्ट स्तंभ = [{
शीर्षक: "कॉलम 1",
संसाधन: [{
नाम: "वस्तु 1",
जोड़ना: "/वस्तु 1"
},{
नाम: "आइटम 2",
जोड़ना: "/आइटम2"
},{
नाम: "आइटम 3",
जोड़ना: "/आइटम3"
},{
नाम: "आइटम 4",
जोड़ना: "/आइटम4"
}]
},{
शीर्षक: "कॉलम 2",
संसाधन: [{
नाम: "आइटम 5",
जोड़ना: "/आइटम5"
},{
नाम: "आइटम 6",
जोड़ना: "/आइटम6"
}]
},{
शीर्षक: "कॉलम 3",
संसाधन: [{
नाम: "आइटम 7",
जोड़ना: "/आइटम7"
},{
नाम: "आइटम 8",
जोड़ना: "/आइटम8"
}]
}];वापस करना<सिंपलरिएक्टफूटर
विवरण = {विवरण}
शीर्षक = {शीर्षक}
कॉलम = {कॉलम}
लिंक्डइन ="लोरेम_इप्सम_ऑन_लिंक्डिन"
फेसबुक ="लॉरेम_इप्सम_ऑन_एफबी"
चहचहाना ="लॉरेम_इप्सम_ऑन_ट्विटर"
इंस्टाग्राम ="लोरेम_इप्सम_लाइव"
यूट्यूब ="UCFT6TSF464J8K82xeA?"
Pinterest ="लोरेम_इप्सम_कलेक्शन"
कॉपीराइट ="काला"
आइकन रंग ="काला"
बैकग्राउंड कलर ="हल्का भूरा रंग"
फॉन्ट कलर ="काला"
कॉपीराइट रंग ="गहरा भूरा"
/>;
}
निर्यातगलती करना पाद;
यह उदाहरण एक अनुकूलित पाद लेख बनाने के लिए simple-react-footer मॉड्यूल में उपलब्ध सभी प्रॉप्स का उपयोग करता है। कोड विभिन्न रंगों और विभिन्न सोशल मीडिया आइकनों के साथ एक पाद लेख बनाएगा:
लिंक्डइन, फेसबुक, ट्विटर, इंस्टाग्राम, यूट्यूब और पिंटरेस्ट प्रॉप्स कंपनी या संगठन के सोशल मीडिया हैंडल को निर्दिष्ट करते हैं। यदि आप ये सहारा प्रदान करते हैं, तो मॉड्यूल पाद लेख में संबंधित सोशल मीडिया आइकन प्रदर्शित करता है।
कॉपीराइट प्रोप पाद लेख के लिए कॉपीराइट पाठ निर्दिष्ट करता है। मॉड्यूल इस पाठ को पाद लेख के नीचे प्रदर्शित करता है।
आइकन कलर, बैकग्राउंड कलर, फॉन्ट कलर और कॉपीराइट कलर प्रॉप्स फुटर के अपीयरेंस को कस्टमाइज करते हैं।
आपकी वेबसाइट को अच्छा दिखाने के अलावा, एक उत्तरदायी पाद लेख आपकी वेबसाइट के उपयोगकर्ता अनुभव को बेहतर बना सकता है। एक उत्तरदायी पाद लेख यह सुनिश्चित करता है कि सभी उपयोगकर्ता, चाहे वे किसी भी उपकरण का उपयोग कर रहे हों, पाद लेख को आसानी से एक्सेस और उपयोग कर सकते हैं।