claxed

دروس مع نفس النمط من المكونات المصممة
عرض العرض التوضيحي · الإبلاغ عن خطأ · طلب ميزة

حول المشروع

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

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

تثبيت

npm install claxed

أو

yarn add claxed

الاستخدام

إذا كنت تعرف المكونات المصممة ، فقد يكون هذا الجملة مألوفًا لك بالفعل. كل ما تكتبه داخل سلسلة القالب ، سيتم طباعة في سمة class HTML للمكون. في المثال التالي ، كل صف هو فئة CSS.

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

خريطة الطريق

راجع المشكلات المفتوحة للحصول على قائمة بالميزات المقترحة (والمشكلات المعروفة).

المساهمة

المساهمات هي التي تجعل مجتمع المصدر المفتوح هذا شكل مكان مذهل حيث يتعلم ، وأن تكون مصدر إلهام ، وإنشاء. أي مساهمات تقدمها موضع تقدير كبير .

1. شوكة المشروع
2. قم بإنشاء فرع الميزات الخاص بك ( git checkout -b feature/AmazingFeature )
3. ارتكب التغييرات الخاصة بك ( git commit -m 'Add some AmazingFeature' )
4. ادفع إلى الفرع ( git push origin feature/AmazingFeature )
5. افتح طلب سحب

التعليمات

هل الترتيب الذي أكتب فيه الفئات ذات الصلة بالكلاس لخصوصية CSS الخاصة بهم؟

لا. إذا كان لديك أي مشكلة خصوصية ، فيجب أن تنظر في كيفية تعريف الفصول في ملف CSS

رخصة

موزعة تحت رخصة معهد ماساتشوستس للتكنولوجيا. انظر LICENSE لمزيد من المعلومات.

اتصال

Tommaso Poletti - @tomma5o

رابط المشروع: https://github.com/tomma5o/claxed