ریایکٹ ٹیل وائنڈ کمپوننٹ بلڈر مع لائیو پریویو اور کوڈ برآمد
ٹیل وائنڈ سی ایس ایس کے ساتھ کسٹم ریایکٹ کمپوننٹس بنائیں۔ بٹنز، ان پٹس، ٹیکسٹ ایریاز، سیلیکٹس اور بریڈکرمبز کو ریئل ٹائم پریویو اور آپ کے پروجیکٹس میں استعمال کے لیے تیار کردہ کوڈ کے ساتھ بنائیں۔
ریایکٹ کمپوننٹ بلڈر ٹیل وینڈ سی ایس ایس کے ساتھ
ریایکٹ کمپوننٹس ٹیل وینڈ سی ایس ایس کے ساتھ بنائیں اور لائیو پیش نظارے دیکھیں
کمپوننٹ کی قسم
خصوصیات
جواب دہ نظارہ
حالت کا پیش نظارہ
لائیو پیش نظارہ
جنریٹ کردہ کوڈ
<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>
دستاویزات
React Tailwind کمپوننٹ بلڈر: کسٹم UI کمپوننٹس بنائیں جن میں لائیو پریویو ہو
آن لائن React Tailwind کمپوننٹ بلڈر کے ساتھ فوری طور پر کمپوننٹس بنائیں
React Tailwind کمپوننٹ بلڈر ایک طاقتور وژوئل ایڈیٹر ہے جو آپ کو فوری طور پر Tailwind CSS کے ساتھ کسٹم React کمپوننٹس بنانے میں مدد کرتا ہے۔ یہ مفت آن لائن React Tailwind کمپوننٹ بلڈر ڈیولپرز اور ڈیزائنرز کو بغیر CSS کوڈ لکھے پروڈکشن-ریڈی UI کمپوننٹس بنانے، کسٹمائز کرنے اور برآمد کرنے میں مدد کرتا ہے۔ ہمارے لائیو پریویو React Tailwind بلڈر کے ساتھ، آپ بٹنز، فارمز، انپٹس اور نیویگیشن کمپوننٹس کو Tailwind کے utility-first CSS فریم ورک کا استعمال کرتے ہوئے ڈیزائن کرتے وقت ریئل ٹائم تبدیلیوں کو دیکھ سکتے ہیں۔
ہمارے React Tailwind کمپوننٹ بلڈر میں بٹنز، ٹیکسٹ انپٹس، ٹیکسٹ ایریاز، سلیکٹ ڈراپ ڈاؤنز اور بریڈکرمب نیویگیشن سمیت ضروری UI عناصر بنانے کی حمایت ہے۔ ہر React کمپوننٹ کو Tailwind CSS utility کلاسز کا استعمال کرکے رنگوں، سپیسنگ، ٹائپوگرافی، بارڈرز اور ریسپانسیو ڈیزائن کے لیے مکمل طور پر کسٹمائز کیا جا سکتا ہے - سب کچھ فوری لائیو پریویو کے ساتھ جو آپ کی خصوصیات میں ترمیم کرتے وقت ڈائنامک طور پر اپ ڈیٹ ہوتا ہے۔ رپڈ پروٹوٹائپنگ اور کمپوننٹ ڈویلپمنٹ کے لیے کامل۔
React Tailwind کمپوننٹ بلڈر کی اہم خصوصیات
- متعدد کمپوننٹ اقسام: بٹنز، ٹیکسٹ انپٹس، ٹیکسٹ ایریاز، سلیکٹ مینوز اور بریڈکرمب نیویگیشن بنائیں
- لائیو پریویو: خصوصیات میں ترمیم کرتے وقت آپ کے کمپوننٹس کو ریئل ٹائم میں اپ ڈیٹ ہوتے دیکھیں
- ریسپانسیو ٹیسٹنگ: موبائل، ٹیبلیٹ اور ڈیسک ٹاپ منظرناموں میں آپ کے کمپوننٹس کا پریویو دیکھیں
- اسٹیٹ وژوئلائزیشن: آپ کے کمپوننٹس کے مختلف اسٹیٹس (نارمل، ہوور، فوکس، ایکٹو) میں کیسے دکھائی دیتے ہیں اس کا ٹیسٹ کریں
- کوڈ جنریشن: Tailwind CSS کلاسز کے ساتھ صاف، استعمال کے لیے تیار React کوڈ حاصل کریں
- کلپ بورڈ پر کاپی: ایک کلک میں جنریٹ کردہ کوڈ کو آسانی سے کاپی کریں
- کوئی ڈپینڈنسیز نہیں: براؤزر میں مکمل طور پر کام کرتا ہے، کوئی بیرونی API کالز یا بیک اینڈ کی ضرورت نہیں
React Tailwind کمپوننٹ بلڈر کا استعمال کرنے کا مرحلہ وار رہنما:
مرحلہ 1: اپنے React کمپوننٹ کی قسم منتخب کریں
شروع میں آپ کو دستیاب اختیارات میں سے وہ کمپوننٹ منتخب کرنا ہے جسے آپ بنانا چاہتے ہیں:
- بٹن: کال-ٹو-ایکشن بٹنز، جمع کرنے والے بٹنز یا نیویگیشن بٹنز بنائیں
- ٹیکسٹ انپٹ: فارم انپٹ فیلڈز کے لیے ڈیزائن کریں جن میں ایک لائن ٹیکسٹ جمع کی جاتی ہے
- ٹیکسٹ ایریا: طویل مواد کے لیے متعدد لائنوں والے ٹیکسٹ انپٹ ایریاز بنائیں
- سلیکٹ: کسٹمائز کردہ اختیارات کے ساتھ ڈراپ ڈاؤن انتخاب مینوز بنائیں
- بریڈکرمب: صفحے کی ہیرارکی دکھانے کے لیے نیویگیشن بریڈکرمبز ڈیزائن کریں
ہر کمپوننٹ کی قسم کے لیے خصوصیات پینل میں اپنی خصوصیات کو کسٹمائز کرنے کے اختیارات موجود ہیں۔
مرحلہ 2: Tailwind CSS خصوصیات کو کسٹمائز کریں
کمپوننٹ کی قسم منتخب کرنے کے بعد، آپ خصوصیات پینل کا استعمال کرکے اس کے ظاہری شکل اور رویے کو کسٹمائز کر سکتے ہیں۔ عام خصوصیات میں شامل ہیں:
- ٹیکسٹ مواد: بٹنز پر ظاہر ہونے والا ٹیکسٹ یا انپٹس کے لیے placeholder ٹیکسٹ سیٹ کریں
- رنگ: Tailwind کے رنگ پیلیٹ سے ٹیکسٹ اور پس منظر کے رنگ منتخب کریں
- پیڈنگ: کمپوننٹ کے اندرونی سپیس کو ایڈجسٹ کریں
- مارجن: کمپوننٹ کے باہری سپیس کو سیٹ کریں
- بارڈر: مختلف طرز، چوڑائی اور رنگوں کے ساتھ بارڈرز شامل کریں
- بارڈر رادیس: اپنے کمپوننٹ کے کونوں کو گول بنائیں
- چوڑائی: کمپوننٹ کی چوڑائی (auto، full یا فیصد پر مبنی) سیٹ کریں
- ٹائپوگرافی: فانٹ سائز، وزن اور دیگر ٹیکسٹ خصوصیات کو ایڈجسٹ کریں
مخصوص کمپوننٹ اقسام کے لیے، اضافی خصوصیات دستیاب ہیں:
- ٹیکسٹ انپٹ/ٹیکسٹ ایریا: placeholder ٹیکسٹ، لازمی حیثیت اور غیر فعال اسٹیٹ سیٹ کریں
- ٹیکسٹ ایریا: لائنوں کی تعداد کو ایڈجسٹ کریں
- سلیکٹ: اختیارات شامل، ترمیم یا ہٹائیں
- بریڈکرمب: نیویگیشن آئٹمز اور لنکس کو کنفیگر کریں
مرحلہ 3: React کمپوننٹس کا لائیو پریویو
جیسے آپ خصوصیات میں ترمیم کرتے ہیں، لائیو پریویو ریئل ٹائم میں اپ ڈیٹ ہوتا ہے، جس سے آپ کو دکھائی دیتا ہے کہ آپ کا کمپوننٹ کیسا دکھائی دے گا۔ آپ یہ بھی کر سکتے ہیں:
- ریسپانسیو رویے کا ٹیسٹ کریں: موبائل، ٹیبلیٹ اور ڈیسک ٹاپ منظرناموں میں سوئچ کریں تاکہ آپ کو یقین ہو کہ آپ کا کمپوننٹ تمام سکرین سائزوں پر اچھا دکھائی دے
- مختلف اسٹیٹس چیک کریں: دیکھیں کہ آپ کا کمپوننٹ نارمل، ہوور، فوکس اور ایکٹو اسٹیٹس میں کیسا دکھائی دیتا ہے
مرحلہ 4: React Tailwind کوڈ برآمد کریں
آپ اپنے کمپوننٹ سے مطمئن ہو جانے پر، آلہ خودکار طور پر React کوڈ جنریٹ کرتا ہے جس میں Tailwind CSS کلاسز شامل ہیں۔ آپ:
- جنریٹ کردہ کوڈ کا جائزہ لے سکتے ہیں: ٹھیک طرح سے لاگو کیے گئے تمام Tailwind کلاسز کے ساتھ React JSX کوڈ دیکھیں
- کلپ بورڈ پر کاپی کر سکتے ہیں: "کوڈ کاپی کریں" بٹن پر کلک کریں تاکہ کوڈ آپ کی کلپ بورڈ پر کاپی ہو جائے
- اپنے پروجیکٹ میں استعمال کر سکتے ہیں: کوڈ کو براہ راست اپنے React پروجیکٹ میں پیسٹ کریں
React Tailwind کمپوننٹ کی اقسام: مکمل رہنما
بٹنز
بٹنز صارف کی تعامل کے لیے ضروری UI عناصر ہیں۔ ہمارے بلڈر کے ساتھ، آپ مختلف بٹن سٹائلز بنا سکتے ہیں:
- پرائمری ایکشن بٹنز
- سیکنڈری یا آؤٹ لائن بٹنز
- آئکن بٹنز
- پوری چوڑائی والے بٹنز
- غیر فعال بٹنز
اہم کسٹمائزیشن اختیارات:
- ٹیکسٹ مواد
- پس منظر اور ٹیکسٹ کے رنگ
- پیڈنگ اور مارجن
- بارڈر اور بارڈر رادیس
- چوڑائی اور اونچائی
- فانٹ سائز اور وزن
- ہوور، فوکس اور ایکٹو اسٹیٹس
جنریٹ کردہ کوڈ کا مثال:
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ٹیک
متعلقہ اوزار
آپ کے ورک فلو کے لیے مفید ہونے والے مزید ٹولز کا انعام کریں