weightless
1.0.0
وصل هذا المشروع إلى نهاية تطوره. لا تتردد في تصفح الرمز.
مكونات ويب عالية الجودة مع بصمة صغيرة
شكرا جزيلا لإظهار الاهتمام بهذا المشروع! إذا كنت ترغب في مساعدتنا في إطعام Octocat الخاص بنا ، فيجب أن تصبح بالتأكيد نجمة النجوم. تم تصميم مكونات الويب هذه لاستخدامها. إنها خفيفة الوزن ، ولها واجهة برمجة تطبيقات بسيطة وسهلة تمديدها وتكوينها. اذهب إلى هنا لمشاهدة عرض تجريبي https://weightless.dev/elements.
اذهب هنا لتجربة العرض التوضيحي.
$ npm i weightless
إذا كنت ترغب في البدء بسرعة فائقة ، فيمكنك استخدام CLI.
$ npm init web-config new my-project --lit
إذا كنت تفضل استخدام حزمة umd ، فيمكنك استيراد https://unpkg.com/weightless/umd/weightless.min.js . ضع في اعتبارك أن هذا يستورد جميع العناصر ، لذلك يوصى باستخدامه فقط لأغراض الاختبار.
< script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script > | اسم | علامة | وصف | الوثائق | العرض التوضيحي |
|---|---|---|---|---|
| خلفية | wl-backdrop | طبقة مظلمة لاستخدامها وراء العناصر المتراكبة. | الوثائق | العرض التوضيحي |
| لافتة | wl-banner | عرض رسالة غير متداخلة والإجراءات الاختيارية ذات الصلة. | الوثائق | العرض التوضيحي |
| زر | wl-button | السماح للمستخدمين اتخاذ الإجراءات ، واتخاذ الخيارات ، بنقرة واحدة. | الوثائق | العرض التوضيحي |
| بطاقة | wl-card | المحتوى المتعلق بالمجموعة والعمل. | الوثائق | العرض التوضيحي |
| مربع الاختيار | wl-checkbox | قم بتشغيل أو إيقاف تشغيل خيار. | الوثائق | العرض التوضيحي |
| مربع الحوار | wl-dialog | رسائل مقاصة للغاية. | الوثائق | العرض التوضيحي |
| مقسم | wl-divider | خط رفيع يجمع المحتوى في القوائم والتخطيطات. | الوثائق | العرض التوضيحي |
| توسع | wl-expansion | توفير عرض تفاصيل قابلة للتوسيع. | الوثائق | العرض التوضيحي |
| رمز | wl-icon | رموز الإجراءات والعناصر الشائعة. | الوثائق | العرض التوضيحي |
| ملصق | wl-label | جعل عناصر النموذج أكثر سهولة. | الوثائق | العرض التوضيحي |
| عنصر قائمة | wl-list-item | عرض عنصر في قائمة. | الوثائق | العرض التوضيحي |
| نافعة | wl-nav | توفير الوصول إلى الوجهات في تطبيقك. | الوثائق | العرض التوضيحي |
| بوبوفر | wl-popover | العناصر المرتكجة السياقية | الوثائق | العرض التوضيحي |
| بطاقة بوبوفر | wl-popover-card | إعطاء popovers الذوق السياقي. | الوثائق | العرض التوضيحي |
| شريط التقدم | wl-progress-bar | يملأ شريط من 0 ٪ إلى 100 ٪. | الوثائق | العرض التوضيحي |
| تقدم الدوار | wl-progress-spinner | يملأ دائرة من 0 ٪ إلى 100 ٪. | الوثائق | العرض التوضيحي |
| راديو | wl-radio | حدد خيار واحد من مجموعة. | الوثائق | العرض التوضيحي |
| تموج | wl-ripple | تشير إلى تصرفات اللمس. | الوثائق | العرض التوضيحي |
| يختار | wl-select | حدد قيمًا واحدة أو أكثر من مجموعة من الخيارات. | الوثائق | العرض التوضيحي |
| شريط التمرير | wl-slider | قم بإجراء اختيارات من مجموعة من القيم. | الوثائق | العرض التوضيحي |
| وجبة خفيفة | wl-snackbar | تقديم رسائل موجزة في أسفل الشاشة. | الوثائق | العرض التوضيحي |
| يُحوّل | wl-switch | قم بتشغيل أو إيقاف تشغيل خيار. | الوثائق | العرض التوضيحي |
| فاتورة غير مدفوعة | wl-tab | تنظيم التنقل بين مجموعات المحتوى. | الوثائق | العرض التوضيحي |
| مجموعة علامة التبويب | wl-tab-group | تنظيم التنقل بين مجموعات المحتوى. | الوثائق | العرض التوضيحي |
| نص | wl-text | مجموعة النص في الفقرات. | الوثائق | العرض التوضيحي |
| Textarea | wl-textarea | حقول نص متعددة. | الوثائق | العرض التوضيحي |
| Textfield | wl-textfield | حقول النص المنفردة. | الوثائق | العرض التوضيحي |
| عنوان | wl-title | تشير إلى بداية قسم جديد. | الوثائق | العرض التوضيحي |
| Tooltip | wl-tooltip | نص مفيدة ذات صلة بالسياق. | الوثائق | العرض التوضيحي |
هناك الكثير من الأشياء المثيرة على خريطة الطريق. حتى v1.0.0 ، يمكنك توقع أن تكون واجهة برمجة التطبيقات مستقرة إلى حد ما ولكن قد لا تزال إعادة إعادة البناء تحدث وتكسر التوافق المتخلف. اهلا وسهلا بكم جدا لاستخدام المكتبة أو إنشاء طلبات سحب أو إضافة مشكلات.
أنت أكثر من مرحب بك للمساهمة في هذا المستودع! فيما يلي بعض التعليمات حول كيفية إعداد المشروع للتطوير.
git clone https://github.com/andreasbm/weightless.git .npm i لتثبيت جميع التبعيات.npm run s يجب فتح المتصفح تلقائيًا في عنوان URL الصحيح. إذا لم يكن الأمر كذلك ، يمكنك فتح متصفحك والانتقال إلى http://localhost:1350 .npm run test .npm run lint .npm run docs .تتم كتابة العناصر في TypeScript وتتم كتابة أوراق الأنماط في Sass. جميع مكونات الويب تستخدم العنصر المضاء.
إذا كنت تريد معرفة المزيد حول كيفية مساعدتك ، فيجب عليك بالتأكيد التحقق من ملف المساهمة. سيتم إضافة جميع المساهمين إلى قسم المساهمين أدناه.
| أندرياس مهيلسن | أنت؟ |
مرخصة تحت معهد ماساتشوستس للتكنولوجيا.
