TW Elements React

تتفاعل عناصر TW

TW Elements React هي مجموعة ضخمة من مكونات React المجانية والتفاعلية لـ CSS Tailwind.

500+ مكونات واجهة المستخدم دعم الوضع المظلم سهلة التخصيص والتخصيص تثبيت بسيط ، 1 دقيقة مجاني للاستخدام الشخصي والتجاري ابدأ مع عناصر TW تتفاعل الآن!

---

جدول المحتويات

• جدول المحتويات
• رخصة
• قريباً
• عناصر
• تثبيت

---

رخصة

تتوفر معلومات ترخيص Twe React Alpha في ملف الترخيص

---

قريباً

تحقق من الميزات القادمة - شاهد ملفات تعريفنا الاجتماعية للوصول المبكر !

منشئ السحب والإفلات	قوالب	كتل التصميم

---

عناصر

مجموعة من المكونات المذهلة التي تم إجراؤها مع الاهتمام بأصغر التفاصيل. النماذج والبطاقات والأزرار والمئات من الآخرين - في TW Elements تتفاعل ، ستجد جميع العناصر الأساسية اللازمة لكل مشروع.

DatePicker (قريبا)	المنسدلة (قريبا)	وسيط
المخططات (قريبا)	تلميحات الأدوات (قريبًا)	كاروسيل (قريبا)
الأكورديون	علامات التبويب	السائر (قريبا)
TimePicker (قريبا)	تذييل	Navbar (قريبا)
تنبيهات (قريبا)	الصورة الرمزية	شارات
مجموعة زر	أزرار	البطاقات
رقائق (قادمة قريبا)	ينهار	معرض (قريبا)
Jumbotron (قريبا)	وصلة	مجموعة قائمة
الإخطارات (قريبا)	الفقرات	أصحاب نائبة
Popover (قريبا)	تقدم	تصنيف
انتقل إلى الأعلى	الأزرار الاجتماعية	المغازل
الجدول الزمني	نخب (قريبا)	Tooltip (قريبا)
فيديو (قريبا)	Carousel فيديو (قريبا)	مربع الاختيار
إدخال الملف	مجموعة المدخلات (قريبا)	نموذج تسجيل الدخول
راديو	يتراوح	نموذج التسجيل
يبحث	حدد (قريبا)	يُحوّل
Textarea (قريبا)	الطاولات	تموج
الرسوم المتحركة (قريبا)	أقنعة	الظلال

---

تثبيت

NPM

1. قبل بدء تشغيل المشروع ، تأكد من تثبيت Node.js (LTS) الإصدار 14+ و 16+ و tailwindcss.

2. قم بتشغيل الأمر التالي لتثبيت الحزمة عبر NPM:

 npm i git+https://oauth2:[email protected]/mdb/twe-react/prd/twe-react-pro-essential

3. أضف ملف TW Elements React CSS إلى ملف JS/TSX الرئيسي الخاص بك

 import "tw-elements-react/dist/css/tw-elements-react.min.css" ;

4. TW Elements عبارة عن مكون إضافي ويجب تضمينه داخل ملف tailwind.config.js . يوصى أيضًا بتمديد صفيف المحتوى بملف JS الذي يقوم بتحميل فئات المكونات الديناميكية:

 module . exports = {
  content : [
    "./index.html" ,
    "./src/**/*.{js,ts,jsx,tsx}" ,
    "./node_modules/tw-elements-react/dist/js/**/*.js" ,
  ] ,
  theme : {
    extend : { } ,
  } ,
  darkMode : "class" ,
  plugins : [ require ( "tw-elements-react/dist/plugin.cjs" ) ] ,
} ;

5. ستعمل المكونات بعد استيراد الحزمة:

 import { TECollapse } from "tw-elements-react" ;