टेलविंड सीएसएस के साथ कस्टम रिएक्ट घटकों का निर्माण करें। वास्तविक समय प्रीव्यू और आपके परियोजनाओं में उपयोग करने के लिए तैयार कोड के साथ बटन, इनपुट, टेक्सटेरिया, सिलेक्ट और ब्रेडक्रम्ब बनाएं।
टेलविंड सीएसएस के साथ रिएक्ट कंपोनेंट बनाएं और लाइव प्रीव्यू देखें
<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>
रिएक्ट टेलविंड घटक बिल्डर एक शक्तिशाली दृश्यात्मक संपादक है जो आपको तुरंत कस्टम रिएक्ट घटक बनाने में मदद करता है जिसमें टेलविंड सीएसएस शामिल है। यह मुफ़्त ऑनलाइन रिएक्ट टेलविंड घटक बिल्डर डेवलपर्स और डिजाइनर्स को बिना मैन्युअल रूप से सीएसएस कोड लिखे उत्पादन-तैयार यूआई घटक बनाने, कस्टमाइज़ करने और निर्यात करने में सक्षम बनाता है। हमारे लाइव प्रीव्यू रिएक्ट टेलविंड बिल्डर के साथ, आप बटन, फॉर्म, इनपुट और नेविगेशन घटकों को डिज़ाइन करते समय रियल-टाइम में परिवर्तनों को देख सकते हैं।
हमारा रिएक्ट टेलविंड घटक बिल्डर बटन, पाठ इनपुट, टेक्सटेरिया, चयन ड्रॉपडाउन और ब्रेडक्रंब नेविगेशन सहित आवश्यक यूआई तत्वों को बनाने का समर्थन करता है। प्रत्येक रिएक्ट घटक को टेलविंड सीएसएस यूटिलिटी क्लास का उपयोग करके रंग, स्पेसिंग, टाइपोग्राफी, बॉर्डर और रिस्पॉन्सिव डिज़ाइन के लिए पूरी तरह से कस्टमाइज़ किया जा सकता है - सभी तुरंत लाइव प्रीव्यू के साथ जो गुण को संशोधित करते समय गतिशील रूप से अपडेट होता है। द्रुत प्रोटोटाइपिंग और घटक विकास के लिए परफेक्ट।
उपलब्ध विकल्पों से वह घटक प्रकार चुनकर शुरू करें जिसे आप बनाना चाहते हैं:
प्रत्येक घटक प्रकार के लिए गुण पैनल में दिखाई देने वाले अपने कस्टमाइज़ेशन विकल्प होते हैं।
घटक प्रकार का चयन करने के बाद, आप गुण पैनल का उपयोग करके इसके प्रदर्शन और व्यवहार को कस्टमाइज़ कर सकते हैं। सामान्य गुण में शामिल हैं:
विशिष्ट घटक प्रकारों के लिए, अतिरिक्त गुण उपलब्ध हैं:
जैसे-जैसे आप गुण को समायोजित करते हैं, लाइव प्रीव्यू रियल-टाइम में अपडेट होता है, जो दिखाता है कि आपका घटक कैसा दिखेगा। आप यह भी कर सकते हैं:
एक बार जब आप अपने घटक से संतुष्ट हो जाते हैं, तो उपकरण स्वचालित रूप से संबंधित रिएक्ट 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="अपना
अपने वर्कफ़्लो के लिए उपयोगी हो सकने वाले और अधिक उपकरण खोजें।