بناء مكون React Tailwind: إنشاء مكونات واجهة مستخدم مخصصة مع معاينة مباشرة

قم ببناء مكونات React Tailwind على الفور باستخدام محرر مرئي

يعد بناء مكون React Tailwind محرر مرئي قوي يساعدك على إنشاء مكونات React مخصصة باستخدام Tailwind CSS على الفور. هذا بناء مكون React Tailwind المجاني عبر الإنترنت يمكّن المطورين والمصممين من بناء وتخصيص وتصدير مكونات واجهة مستخدم جاهزة للإنتاج دون الحاجة إلى كتابة كود CSS يدويًا. باستخدام بناء React Tailwind مع معاينة مباشرة، يمكنك رؤية التغييرات في الوقت الفعلي أثناء تصميم الأزرار والنماذج والإدخالات والمكونات الملاحية باستخدام إطار عمل Tailwind CSS المبني على الأدوات المساعدة.

يدعم بناء مكون React Tailwind إنشاء عناصر واجهة المستخدم الأساسية بما في ذلك الأزرار وإدخالات النص والمناطق النصية والقوائم المنسدلة والتنقل بواسطة فتات الخبز. يمكن تخصيص كل مكون React بالكامل باستخدام فئات الأدوات المساعدة Tailwind CSS للألوان والمسافات والطباعة والحدود والتصميم المستجيب - كل ذلك مع معاينة مباشرة فورية تتحدث ديناميكيًا مع تعديل الخصائص. مثالي للنماذج الأولية السريعة وتطوير المكونات.

الميزات الرئيسية لبناء مكون React Tailwind

• أنواع متعددة من المكونات: قم ببناء أزرار ومدخلات نصية ومناطق نصية وقوائم منسدلة وتنقل بواسطة فتات الخبز
• معاينة مباشرة: شاهد مكوناتك تتحدث في الوقت الفعلي أثناء تعديل الخصائص
• اختبار الاستجابة: قم بمعاينة مكوناتك في عروض الهاتف المحمول والجهاز اللوحي والسطح المكتب
• تصور الحالة: اختبر كيف تبدو مكوناتك في حالات مختلفة (عادي، تحوم، تركيز، نشط)
• توليد الكود: احصل على كود React نظيف وجاهز للاستخدام مع فئات Tailwind CSS
• النسخ إلى الحافظة: انسخ الكود المولد بنقرة واحدة
• بدون اعتمادات: يعمل بالكامل في المتصفح بدون مكالمات API خارجية أو متطلبات خلفية

كيفية استخدام بناء مكون React Tailwind: دليل خطوة بخطوة

الخطوة 1: اختر نوع مكون React الخاص بك

ابدأ بتحديد نوع المكون الذي تريد بناؤه من بين الخيارات المتاحة:

• زر: إنشاء أزرار دعوة للعمل أو أزرار إرسال أو أزرار تنقل
• إدخال نصي: تصميم حقول إدخال النموذج لجمع النص ذي السطر الواحد
• منطقة نصية: بناء مناطق إدخال النص متعددة الأسطر للمحتوى الأطول
• تحديد: إنشاء قوائم منسدلة للاختيار مع خيارات قابلة للتخصيص
• فتات الخبز: تصميم تنقل بواسطة فتات الخبز لإظهار تسلسل الصفحة

لكل نوع مكون مجموعة من الخصائص القابلة للتخصيص التي ستظهر في لوحة الخصائص.

الخطوة 2: قم بتخصيص خصائص Tailwind CSS

بعد تحديد نوع المكون، يمكنك تخصيص مظهره وسلوكه باستخدام لوحة الخصائص. الخصائص الشائعة تشمل:

• المحتوى النصي: تعيين النص المعروض على الأزرار أو النص البديل للإدخالات
• الألوان: اختر ألوان النص والخلفية من لوحة ألوان Tailwind
• التعبئة: ضبط المسافة الداخلية للمكون
• الهامش: تعيين المسافة الخارجية حول المكون
• الحدود: إضافة حدود بأنماط وأعراض وألوان مختلفة
• نصف قطر الحدود: تدوير زوايا مكونك
• العرض: تعيين عرض المكون (تلقائي أو كامل أو على أساس النسبة المئوية)
• الطباعة: ضبط حجم الخط والوزن وخصائص النص الأخرى

بالنسبة لأنواع المكونات المحددة، تتوفر خصائص إضافية:

• إدخال نصي/منطقة نصية: تعيين النص البديل والحالة المطلوبة والحالة المعطلة
• منطقة نصية: ضبط عدد الأسطر
• تحديد: إضافة أو تحرير أو إزالة الخيارات
• فتات الخبز: تكوين عناصر التنقل والروابط

الخطوة 3: معاينة مباشرة لمكونات React

أثناء ضبط الخصائص، تتحدث المعاينة المباشرة في الوقت الفعلي، مما يوضح تمامًا كيف سيبدو مكونك. يمكنك أيضًا:

• اختبار السلوك المستجيب: التبديل بين عروض الهاتف المحمول والجهاز اللوحي والسطح المكتب لضمان أن مكونك يبدو جيدًا في جميع أحجام الشاشة
• التحقق من الحالات المختلفة: انظر كيف يبدو مكونك في الحالات العادية والتحوم والتركيز والنشطة

الخطوة 4: تصدير كود React Tailwind

بمجرد أن تكون راضيًا عن مكونك، يقوم الأداة تلقائيًا بتوليد كود React المقابل مع فئات Tailwind CSS. يمكنك:

• مراجعة الكود المولد: انظر إلى كود JSX React الدقيق مع جميع فئات Tailwind المطبقة
• النسخ إلى الحافظة: انقر على زر "نسخ الكود" لنسخ الكود إلى الحافظة
• استخدامه في مشروعك: الصق الكود مباشرة في مشروع React الخاص بك

أنواع مكونات React Tailwind: الدليل الكامل

الأزرار

الأزرار هي عناصر واجهة المستخدم الأساسية للتفاعلات المستخدم. باستخدام بنائنا، يمكنك إنشاء أنماط زر متنوعة:

• أزرار إجراء رئيسية
• أزرار ثانوية أو محددة
• أزرار الأيقونة
• أزرار بعرض كامل
• أزرار معطلة

خيارات التخصيص الرئيسية:

• المحتوى النصي
• ألوان الخلفية والنص
• التعبئة والهامش
• الحدود ونصف قطر الحدود
• العرض والارتفاع
• حجم الخط ووزنه
• حالات التحوم والتركيز والنشطة

مثال على الكود المولد:

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

إدخالات النص

تسمح إدخالات النص للمستخدمين بإدخال نص ذي سطر واحد في النماذج. يساعدك بنائنا على إنشاء إدخالات تتوافق مع نظام التصميم الخاص بك:

خيارات التخصيص الرئيسية:

• النص البديل
• أنماط وألوان الحدود
• التعبئة والعرض
• الحالات المطلوبة والمعطلة
• أنماط التركيز

مثال على الكود المولد:

1<input
2  type="text"
3  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"
4  placeholder="أدخل اسمك"
5  required
6/>
7

المناطق النصية

تُستخدم المناطق النصية للإدخال النصي متعدد الأسطر، مثل التعليقات أو الوصف:

خيارات التخصيص الرئيسية:

• عدد الأسطر
• النص البديل
• سلوك إعادة التحجيم
• الحدود والتعبئة
• الحالات المطلوبة والمعطلة

مثال على الكود المولد:

1<textarea
2  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"
3  placeholder="أدخل رسالتك"
4  rows={4}
5></textarea>
6

القوائم المنسدلة

تسمح القوائم المنسدلة للمستخدمين باختيار من قائمة من الخيارات:

خيارات التخصيص الرئيسية:

• عناصر الخيار (النص والقيمة)
• الحدود والتعبئة
• العرض والمظهر
• الحالات المطلوبة والمعطلة

مثال على الكود المولد:

1<select
2  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"
3  required
4>
5  <option value="option1">الخيار 1</option>
6  <option value="option2">الخيار 2</option>
7  <option value="option3">الخيار 3</option>
8</select>
9

تنقل بواسطة فتات الخبز

تساعد فتات الخبز المستخدمين على فهم موقعهم داخل تسلسل موقع الويب:

خيارات التخصيص الرئيسية:

• عناصر التنقل والروابط
• نمط الفاصل
• ألوان النص والتحوم
• المسافة بين العناصر

مثال على الكود المولد:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="flex space-x-2 text-gray-700">
3    <li className="flex items-center">
4      <a href="/" className="hover:text-blue-600">الرئيسية</a>
5    </li>
6    <li className="flex items-center">
7      <span className="mx-2 text-gray-400">/</span>
8      <a href="/products" className="hover:text-blue-600">المنتجات</a>
9    </li>
10    <li className="flex items-center">
11      <span className="mx-2 text-gray-400">/</span>
12      <a href="/products/category" className="hover:text-blue-600">الفئة</a>
13    </li>
14  </ol>
15</nav>
16

مرجع فئات وخصائص Tailwind CSS

يستفيد بناء مكوننا من فئات الأدوات المساعدة Tailwind CSS لتنسيق المكونات. فيما يلي مرجع سريع للخصائص الأكثر استخدامًا:

الألوان

يوفر Tailwind لوحة ألوان شاملة. بعض الأمثلة:

• ألوان النص: text-{color}-{shade} (على سبيل المثال، text-blue-500، text-red-600)
• **ألوان