लाइव प्रीव्यू और कोड निर्यात के साथ रिएक्ट टेलविंड घटक बिल्डर
टेलविंड सीएसएस के साथ कस्टम रिएक्ट घटकों का निर्माण करें। वास्तविक समय प्रीव्यू और आपके परियोजनाओं में उपयोग करने के लिए तैयार कोड के साथ बटन, इनपुट, टेक्सटेरिया, सिलेक्ट और ब्रेडक्रम्ब बनाएं।
टेलविंड सीएसएस के साथ रिएक्ट कंपोनेंट बिल्डर
टेलविंड सीएसएस के साथ रिएक्ट कंपोनेंट बनाएं और लाइव प्रीव्यू देखें
कंपोनेंट प्रकार
गुण
प्रतिक्रियाशील दृश्य
स्थिति प्रीव्यू
लाइव प्रीव्यू
जनरेट किया गया कोड
<button className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" > Button </button>
दस्तावेज़ीकरण
रिएक्ट टेलविंड घटक बिल्डर: लाइव प्रीव्यू के साथ कस्टम यूआई घटक बनाएं
दृश्यात्मक संपादक के साथ तुरंत रिएक्ट टेलविंड घटक बनाएं
रिएक्ट टेलविंड घटक बिल्डर एक शक्तिशाली दृश्यात्मक संपादक है जो आपको तुरंत कस्टम रिएक्ट घटक बनाने में मदद करता है जिसमें टेलविंड सीएसएस शामिल है। यह मुफ़्त ऑनलाइन रिएक्ट टेलविंड घटक बिल्डर डेवलपर्स और डिजाइनर्स को बिना मैन्युअल रूप से सीएसएस कोड लिखे उत्पादन-तैयार यूआई घटक बनाने, कस्टमाइज़ करने और निर्यात करने में सक्षम बनाता है। हमारे लाइव प्रीव्यू रिएक्ट टेलविंड बिल्डर के साथ, आप बटन, फॉर्म, इनपुट और नेविगेशन घटकों को डिज़ाइन करते समय रियल-टाइम में परिवर्तनों को देख सकते हैं।
हमारा रिएक्ट टेलविंड घटक बिल्डर बटन, पाठ इनपुट, टेक्सटेरिया, चयन ड्रॉपडाउन और ब्रेडक्रंब नेविगेशन सहित आवश्यक यूआई तत्वों को बनाने का समर्थन करता है। प्रत्येक रिएक्ट घटक को टेलविंड सीएसएस यूटिलिटी क्लास का उपयोग करके रंग, स्पेसिंग, टाइपोग्राफी, बॉर्डर और रिस्पॉन्सिव डिज़ाइन के लिए पूरी तरह से कस्टमाइज़ किया जा सकता है - सभी तुरंत लाइव प्रीव्यू के साथ जो गुण को संशोधित करते समय गतिशील रूप से अपडेट होता है। द्रुत प्रोटोटाइपिंग और घटक विकास के लिए परफेक्ट।
रिएक्ट टेलविंड घटक बिल्डर की प्रमुख विशेषताएं
- कई घटक प्रकार: बटन, पाठ इनपुट, टेक्सटेरिया, चयन मेनू और ब्रेडक्रंब नेविगेशन बनाएं
- लाइव प्रीव्यू: गुण को संशोधित करते समय आपके घटक को रियल-टाइम में अपडेट होते देखें
- रिस्पॉन्सिव परीक्षण: मोबाइल, टैबलेट और डेस्कटॉप व्यू में अपने घटक का पूर्वावलोकन करें
- स्थिति दृश्यमानता: अलग-अलग स्थितियों (सामान्य, हावर, फोकस, सक्रिय) में आपके घटक कैसे दिखते हैं, उसका परीक्षण करें
- कोड जनरेशन: टेलविंड सीएसएस क्लास के साथ साफ, तैयार-उपयोग रिएक्ट कोड प्राप्त करें
- क्लिपबोर्ड पर कॉपी करें: एक क्लिक के साथ जनरेट किए गए कोड को आसानी से कॉपी करें
- कोई निर्भरता नहीं: ब्राउज़र में पूरी तरह से काम करता है, बिना किसी बाहरी एपीआई कॉल या बैकएंड आवश्यकता के
रिएक्ट टेलविंड घटक बिल्डर का उपयोग करने का चरण-दर-चरण मार्गदर्शन
चरण 1: अपने रिएक्ट घटक प्रकार का चयन करें
उपलब्ध विकल्पों से वह घटक प्रकार चुनकर शुरू करें जिसे आप बनाना चाहते हैं:
- बटन: कॉल-टू-एक्शन बटन, सबमिट बटन या नेविगेशन बटन बनाएं
- पाठ इनपुट: फॉर्म इनपुट फ़ील्ड के लिए डिज़ाइन करें जहां एकल-पंक्ति पाठ एकत्र किया जाता है
- टेक्सटेरिया: लंबे सामग्री के लिए बहु-पंक्ति पाठ इनपुट क्षेत्र बनाएं
- चयन: कस्टमाइज़ योग्य विकल्पों के साथ ड्रॉपडाउन चयन मेनू बनाएं
- ब्रेडक्रंब: पृष्ठ संरचना को दिखाने के लिए नेविगेशन ब्रेडक्रंब डिज़ाइन करें
प्रत्येक घटक प्रकार के लिए गुण पैनल में दिखाई देने वाले अपने कस्टमाइज़ेशन विकल्प होते हैं।
चरण 2: टेलविंड सीएसएस गुण कस्टमाइज़ करें
घटक प्रकार का चयन करने के बाद, आप गुण पैनल का उपयोग करके इसके प्रदर्शन और व्यवहार को कस्टमाइज़ कर सकते हैं। सामान्य गुण में शामिल हैं:
- पाठ सामग्री: बटन पर प्रदर्शित किए जाने वाले पाठ या इनपुट के लिए प्लेसहोल्डर पाठ सेट करें
- रंग: टेलविंड के रंग पैलेट से पाठ और पृष्ठभूमि रंग चुनें
- पैडिंग: घटक के आंतरिक स्पेसिंग को समायोजित करें
- मार्जिन: घटक के चारों ओर बाहरी स्पेसिंग सेट करें
- बॉर्डर: विभिन्न शैलियों, चौड़ाइयों और रंगों के साथ बॉर्डर जोड़ें
- बॉर्डर त्रिज्या: अपने घटक के कोनों को गोल करें
- चौड़ाई: घटक की चौड़ाई सेट करें (स्वचालित, पूर्ण या प्रतिशत-आधारित)
- टाइपोग्राफी: फ़ॉन्ट आकार, वजन और अन्य पाठ गुण समायोजित करें
विशिष्ट घटक प्रकारों के लिए, अतिरिक्त गुण उपलब्ध हैं:
- पाठ इनपुट/टेक्सटेरिया: प्लेसहोल्डर पाठ, आवश्यक स्थिति और अक्षम स्थिति सेट करें
- टेक्सटेरिया: पंक्तियों की संख्या समायोजित करें
- चयन: विकल्प जोड़ें, संपादित करें या हटाएं
- ब्रेडक्रंब: नेविगेशन आइटम और लिंक कॉन्फ़िगर करें
चरण 3: रिएक्ट घटकों का लाइव प्रीव्यू
जैसे-जैसे आप गुण को समायोजित करते हैं, लाइव प्रीव्यू रियल-टाइम में अपडेट होता है, जो दिखाता है कि आपका घटक कैसा दिखेगा। आप यह भी कर सकते हैं:
- रिस्पॉन्सिव व्यवहार का परीक्षण करें: मोबाइल, टैबलेट और डेस्कटॉप व्यू के बीच स्विच करें ताकि आपका घटक सभी स्क्रीन आकारों पर अच्छा दिखे
- विभिन्न स्थितियों की जांच करें: देखें कि आपका घटक सामान्य, हावर, फोकस और सक्रिय स्थितियों में कैसा दिखता है
चरण 4: रिएक्ट टेलविंड कोड निर्यात करें
एक बार जब आप अपने घटक से संतुष्ट हो जाते हैं, तो उपकरण स्वचालित रूप से संबंधित रिएक्ट JSX कोड को टेलविंड सीएसएस क्लास के साथ जनरेट करता है। आप:
- जनरेट किए गए कोड की समीक्षा कर सकते हैं: टेलविंड क्लास के साथ लागू किए गए सटीक रिएक्ट JSX कोड देखें
- क्लिपबोर्ड पर कॉपी कर सकते हैं: "कोड कॉपी करें" बटन पर क्लिक करके कोड को क्लिपबोर्ड पर कॉपी कर सकते हैं
- अपने परियोजना में उपयोग कर सकते हैं: कोड को सीधे अपने रिएक्ट परियोजना में पेस्ट कर सकते हैं
रिएक्ट टेलविंड घटक प्रकार: पूर्ण मार्गदर्शिका
बटन
बटन उपयोगकर्ता इंटरैक्शन के लिए आवश्यक यूआई तत्व हैं। हमारे बिल्डर के साथ, आप विभिन्न बटन शैलियां बना सकते हैं:
- प्राथमिक क्रिया बटन
- माध्यमिक या आउटलाइन बटन
- आइकन बटन
- पूर्ण चौड़ाई बटन
- अक्षम बटन
प्रमुख कस्टमाइज़ेशन विकल्प:
- पाठ सामग्री
- पृष्ठभूमि और पाठ रंग
- पैडिंग और मार्जिन
- बॉर्डर और बॉर्डर त्रिज्या
- चौड़ाई और ऊंचाई
- फ़ॉन्ट आकार और वजन
- हावर, फोकस और सक्रिय स्थितियां
उदाहरण जनरेट किया गया कोड:
1<button
2 className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none"
3>
4 सबमिट करें
5</button>
6पाठ इनपुट
पाठ इनपुट उपयोगकर्ताओं को फॉर्म में एकल-पंक्ति पाठ दर्ज करने की अनुमति देते हैं। हमारा बिल्डर आपके डिज़ाइन सिस्टम से मेल खाने वाले इनपुट बनाने में मदद करता है:
प्रमुख कस्टमाइज़ेशन विकल्प:
- प्लेसहोल्डर पाठ
- बॉर्डर शैलियां और रंग
- पैडिंग और चौड़ाई
- आवश्यक और अक्षम स्थितियां
- फोकस शैलियां
उदाहरण जनरेट किया गया कोड:
<input type="text" className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="अपना
संबंधित उपकरण
अपने वर्कफ़्लो के लिए उपयोगी हो सकने वाले और अधिक उपकरण खोजें।