reactstrap
v9.2.3
مكونات رد الفعل عديمة الجنسية لل bootstrap 5.
إذا كنت تستخدم Bootstrap 4 ، فستحتاج إلى استخدام REACTSTRAP V8
اتبع تعليمات إنشاء التفاعل للبدء ثم اتبع إصدار ReactStrap من إضافة bootstrap.
npx create-react-app my-app
cd my-app/
npm start
أو ، إذا كان NPX (Node> = 6 و NPM> = 5.2) غير متوفر
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
ثم افتح http: // localhost: 3000/لرؤية تطبيقك. الهيكل الأولي لتطبيقك هو الإعداد. بعد ذلك ، دعنا نضيف REACTSTRAP و BOOTSTRAP.
تثبيت ReactStrap و Bootstrap من NPM. لا يتضمن ReactStrap CSS Bootstrap ، لذا يجب تثبيت هذا أيضًا:
npm i bootstrap
npm i reactstrap react react-dom
استيراد bootstrap css في ملف src/index.js :
import 'bootstrap/dist/css/bootstrap.css' ; استيراد مكونات ReactStrap المطلوبة في ملف src/App.js أو ملفات المكون المخصصة:
import { Button } from 'reactstrap' ; أنت الآن مستعد لاستخدام مكونات ReactStrap المستوردة ضمن التسلسل الهرمي المكون المحدد في طريقة العرض. فيما يلي مثال App.js باستخدام REACTSTRAP.
لا يتم تجميع هذه المكتبات مع ReactStrap ومطلوبة في وقت التشغيل:
تحتوي هذه المكتبة على مكونات Bootstrap React التي تفضل التكوين والتحكم. لا تعتمد المكتبة على jQuery أو Bootstrap JavaScript. ومع ذلك ، يعتمد Poppers.js عبر React-popper على تحديد المواقع المتقدمة للمحتوى مثل تلميحات الأدوات ، والبوبوفات ، والمنسدات المنسدلة التلقائية.
هناك بعض المفاهيم الأساسية التي يجب فهمها من أجل تحقيق أقصى استفادة من هذه المكتبة.
من المتوقع أن يتكون المحتوى الخاص بك عبر الدعائم. أطفال بدلاً من استخدام الدعائم المسمى لتمرير المكونات.
// Content passed in via props
const Example = ( props ) => {
return (
< p > This is a tooltip < TooltipTrigger tooltip = { TooltipContent } > example </ TooltipTrigger > ! </ p >
) ;
}
// Content passed in as children (Preferred)
const PreferredExample = ( props ) => {
return (
< p >
This is a < a href = "#" id = "TooltipExample" > tooltip </ a > example.
< Tooltip target = "TooltipExample" >
< TooltipContent />
</ Tooltip >
</ p >
) ;
}تُستخدم السمات في هذه المكتبة لتمريرها في الحالة ، وتطبيق فئات المعدل بشكل مريح ، وتمكين الوظائف المتقدمة (مثل Tether) ، أو تضمين عناصر غير محددة تلقائيًا.
أمثلة:
isOpen - الحالة الحالية لعناصر مثل القائمة المنسدلة ، popover ، تلميح الأدواتtoggle - رد اتصال لتبديل isOpen في المكون المسيطرcolor - يطبق فئات الألوان ، على سبيل المثال: <Button color="danger"/>size - للسيطرة على فئات الحجم. على سبيل المثال: <Button size="sm"/>tag - تخصيص إخراج المكون عن طريق تمرير اسم عنصر أو مكونvisually-hidden https://reactstrap.github.io
يتم تشغيل البحث عن الوثائق بواسطة DocSearch في Algolia.
فيما يلي بعض الأمثلة الجاهزة لـ CodesandBox التي يمكنك تجربتها.
https://github.com/reactstrap/code-sandbox-examples
تثبيت التبعيات:
yarn installقم بتشغيل أمثلة على http: // localhost: 8080/with webpack dev server:
yarn startتشغيل الاختبارات والتغطية تقرير:
yarn coverاختبارات مشاهدة:
yarn test سيتم إنشاء الفروع/الإصدار/الملاحظات تلقائيًا وصيانتها عن طريق إجراء GitHub-Please. عندما تكون مستعدًا لنشر الإصدار ، ما عليك سوى دمج فرع الإصدار. سيتم إنشاء الإصدار ، وسيتم نشر الحزمة الجديدة ، وسيتم نشر المستندات المحدثة على https://reactstrap.github.io/.
المنظمات والمشاريع باستخدام reactstrap
reactstrap مع الترحيل والفرز والتصفية والتجميع والاختيار والتحرير والتمرير الافتراضي.reactstrap الذي يتصور البيانات باستخدام مجموعة متنوعة من أنواع المسلسلات ، بما في ذلك الشريط والخط والمنطقة والتشتت والفطيرة والمزيد.reactstrap الخاص بك يتكامل بسلاسة باستخدام Formikإرسال العلاقات العامة لإضافة إلى هذه القائمة!
تبحث عن بناء وتوثيق ونشر مكونات قابلة لإعادة الاستخدام المبنية على رأس reactstrap ؟ النظر في forking https://github.com/reactstrap/component-template لبدء مشروعك!
