rewindui
@rewind-ui
تم تصميم Rewind-Ui خصيصًا للاستخدام مع CSS React و Tailwind ، ويوفر مجموعة من المكونات التي يمكن الوصول إليها والتي يمكن تخصيصها للغاية يمكن دمجها بسهولة في أي مشروع React. يأتي Rewind-Ui مع مجموعة من الأنماط الافتراضية التي يمكن تخصيصها بسهولة باستخدام فئات CSS Tailwind. علاوة على ذلك ، يمكن معلمة كل مكون باستخدام مجموعة من الدعائم التي يمكن استخدامها لتغيير الأنماط الافتراضية للمكون.
REWIND-UI متاح كحزمة NPM ويمكن تثبيته باستخدام الأمر التالي:
npm install @rewind-ui/coreتم تصميم REWIND-UI لاستخدامه مع CSS React و Tailwind. لاستخدام REWIND-UI ، يجب عليك أولاً تثبيت REACTJS و CSS Tailwind في مشروعك. علاوة على ذلك ، يجب عليك أيضًا تثبيت حزم NPM التالية:
npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography بعد تثبيت CSS Tailwind ، يجب عليك تكوينه للعمل مع Rewind-Ui. للقيام بذلك ، يجب أولاً إنشاء ملف tailwind.config.js في الدليل الجذر لمشروعك. ثم ، أضف الرمز التالي إلى ملف التكوين هذا:
يوصى بشدة بإضافة ملفات النمط المطلوبة فقط لتجنب وجود ملف CSS المتضخم
module . exports = {
content : [
'./src/**/*.{html,jsx,tsx}' ,
// you can either add all styles
'./node_modules/@rewind-ui/core/dist/theme/styles/*.js' ,
// OR you can add only the styles you need
'./node_modules/@rewind-ui/core/dist/theme/styles/Button.styles.js' ,
'./node_modules/@rewind-ui/core/dist/theme/styles/Text.styles.js'
] ,
plugins : [
require ( '@tailwindcss/typography' ) ,
require ( 'tailwind-scrollbar' ) ( { nocompatible : true } ) ,
require ( '@tailwindcss/forms' ) ( {
strategy : 'class' // only generate classes
} )
]
} ;للبدء في استخدام مكونات REWIND-UI ، فقط أضف عبارة الاستيراد التالية إلى أعلى مكون React الخاص بك:
import { Button } from '@rewind-ui/core' ;ثم ، يمكنك استخدام المكون في رمز JSX الخاص بك:
< Button > Click Me </ Button > يحتوي كل مكون على مجموعة من الأنماط الافتراضية التي يمكن تحديدها باستخدام الدعائم المقابلة. على سبيل المثال ، يحتوي مكون Button على لون أزرق افتراضي وحجم متوسط. يمكن تغيير هذه القيم عن طريق ضبط الدعائم color size على المكون:
< Button color = "black" size = "sm" > Click Me </ Button > علاوة على ذلك ، يمكن تخصيص نمط المكون عن طريق تمرير اسم className العادي إليه. يمكن استخدام هذا الدعامة لتجاوز الأنماط الافتراضية للمكون. على سبيل المثال ، سوف يغير الرمز التالي وزن الخط للزر إلى شبه جليدي:
يستخدم Rewind-Ui Tailwind-Merge لدمج الفئات الافتراضية مع الفئات التي تقدمها في className Prop وحل أي تعارض محتمل.
< Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button > محاولة تجنب جعل المستخدم يستخدم خصائص متعددة مرارًا وتكرارًا ، لقد أنشأنا دعامة variant . البديل هو في الأساس مجموعة محددة مسبقًا من الخصائص التي يمكن استخدامها لتخصيص مكون. على سبيل المثال ، يحتوي مكون Button على متغير success يمكن استخدامه لإنشاء زر نجاح يشبه bootstrap:
< Button variant = "success" > Click Me </ Button >يمكنك قراءة المزيد حول المتغيرات لكل مكون في صفحة الوثائق المقابلة الخاصة بهم.
جميع مكونات REWIND-UI قابلة للتخصيص للغاية. هذا يعني أنه يمكنك بسهولة تغيير الأنماط الافتراضية للمكون عن طريق تجاوز فئات CSS ذات الاتجاه المقابل. يمكنك قراءة المزيد حول تخصيص الأسلوب على صفحة Theming.
شكر خاص للأشخاص التاليين:
شكر خاص للفرق التالية:
