الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

الأسد

الموقع الإلكتروني · الأساسيات · الأدلة · المكونات · المدونة

Lion عبارة عن مجموعة من مكونات الويب المرنة عالية الأداء والتي يسهل الوصول إليها.!

إنها توفر طبقة ذات علامة بيضاء غير مدروسة يمكن توسيعها لتشمل طبقة المكونات الخاصة بك.

  • الأداء العالي: التركيز على الأداء الرائع في جميع المتصفحات ذات الصلة مع أقل عدد ممكن من التبعيات.

  • إمكانية الوصول: تهدف إلى الامتثال لمعيار WCAG 2.2 AA لإنشاء مكونات يمكن للجميع الوصول إليها.

  • المرونة: توفير الحلول من خلال مكونات الويب وفئات JavaScript التي يمكن استخدامها واعتمادها وتوسيعها لتناسب جميع الاحتياجات.

  • الكود الحديث: يتم توزيع Lion كوحدات es خالصة.

  • يعرض الوظائف/الفئات ومكونات الويب: يشحن الوظيفة في أنسب شكل لها.

ملاحظة: قد تبدو الأمثلة التوضيحية لدينا بسيطة وليست أنيقة جدًا. هذا عن قصد. لقد تم تصميمها لتكون أساسية بحيث يمكنك بسهولة إضافة أنماطك الخاصة إليها لتتناسب مع التصميم المقصود، دون التعامل مع الأنماط الموجودة بالفعل.

استكشف أدلة الأسد ◀

كيفية التثبيت

 npm أنا @lion/ui

كيفية الاستخدام

توسيع مكون ويب

هذه هي حالة الاستخدام الرئيسية للأسد . لاستيراد فئات المكونات وتوسيعها لمكونات نظام التصميم الخاص بك.

 استيراد {css} من 'lit'؛استيراد {LionInput} من '@lion/ui/input.js'؛class MyInput يمتد LionInput {
  الحصول على الأنماط الثابتة () {return [super.styles, css` /* أنماطك هنا */ `,];
  }}customElements.define('my-input', MyInput);

استخدم نظام جافا سكريبت

هناك بضعة "أنظمة" في الأسد تحتوي على واجهة برمجة تطبيقات JavaScript. ومن الأمثلة على ذلك localize ، overlays ، ajax ، وما إلى ذلك.

 <نوع البرنامج النصي = "الوحدة النمطية">
  استيراد { ajax } من '@lion/ui/ajax.js'؛

  ajax.fetch('data.json').then(response => Response.json()).then(data => { // افعل شيئًا باستخدام البيانات});</script>

استخدم أحد مكونات الويب

يمكنك أيضًا استخدام عناصر الأسد مباشرةً، على الرغم من أن هذه ليست حالة استخدام شائعة على الأرجح.

 <نوع البرنامج النصي = "الوحدة النمطية">
  استيراد '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>

مشاكل

إذا واجهت مشكلة مع أي من الحزم التي نقدمها، يرجى فتح مشكلة خطأ جديدة. تأكد من تضمين وصف للسلوك المتوقع والحالي - حيث تساعد دائمًا إضافة نسخة إضافية.

طلبات الميزات

عندما تكون لديك فكرة عن كيفية تحسيننا، يرجى مراجعة مناقشاتنا لمعرفة ما إذا كانت هناك أفكار أو طلبات ميزات مماثلة. إذا لم يكن هناك أي شيء، يرجى بدء طلب الميزة كموضوع مناقشة جديد. أضف العنوان [Feature Request] My awesome feature ووصفًا لما تتوقعه من التحسين وما هي حالة الاستخدام.

محتوى

اسم إصدار وصف
@الأسد/واجهة المستخدم
 مجموعة من المكونات
@الأسد/أياكس
 غلاف صغير حول الجلب
مدير سينجلتون
 يوفر المدير المفرد طريقة للتأكد من أن المثيل المفرد الذي تم تحميله من مواقع ملفات متعددة يظل مفردًا. يكون مفيدًا بشكل أساسي في حالة استخدام إصدارين رئيسيين من الحزمة ذات المفردة.
يقوم البرنامج المساعد بابل بتوسيع المستندات
 مكون إضافي يعيد كتابة الواردات والقوالب وفقًا للتكوين. يتيح ذلك إعادة استخدام الوثائق الموجودة من الحزم المصدر مع الاستمرار في استخدام رمز الامتدادات الخاص بك.
تحليلات بروفيدنس
 العناية الإلهية هي "كل العيون" التي تولد إحصائيات الاستخدام من خلال تحليل التعليمات البرمجية. إنه يقيس مدى فعالية وشعبية برنامجك. من خلال عدد قليل من الأوامر، يمكنك قياس تأثير التغييرات (المعطلة)، مما يجعل عملية الإصدار أكثر استقرارًا وقابلية للتنبؤ بها.
نشر المستندات
 أداة تقوم بنسخ وثائقك ومعالجتها (في monorepo) حتى يمكن نشرها/شحنها مع الحزمة الخاصة بك.
ملاحظة تمتد
 مكون إضافي للملاحظة لتوسيع عملية تخفيض السعر عن طريق الاستيراد من الملفات المصدر.
يقوم الصاروخ المُعد مسبقًا بتوسيع مستندات الأسد
 عند الحفاظ على طبقة الامتداد الخاصة بك من الأسد، فمن المرجح أنك تريد الاحتفاظ بوثائق مماثلة. يعمل نسخ ملفات تخفيض السعر وإعادة كتابتها، ولكن عندما يتغير شيء ما، تحتاج إلى النسخ وإعادة الكتابة مرة أخرى. للقيام بذلك تلقائيًا، يمكنك استخدام هذا الإعداد المسبق للصاروخ.

التقنيات

تهدف Lion Web Components إلى أن تكون مقاومة للمستقبل وأن تستخدم تكنولوجيا مثبتة ومدعومة جيدًا. المكدس الذي اخترناه يجب أن يعكس هذا.

  • مضاءة

  • npm

  • افتح مكونات الويب

  • الويب الحديث

  • موكا

  • تشاي

  • ESLint

  • أجمل

  • وحدات ES

  • الكثير والكثير من الاختبارات

الأساس المنطقي

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

يهدف الأسد إلى القيام بالرفع الثقيل نيابةً عنك. هذا يعني أنه لا يتعين عليك سوى تطبيق نظام التصميم الخاص بك: من خلال تقديم الأنماط وتكوين المكونات وإضافة مجموعة بسيطة من المنطق المخصص في الأعلى.

إرشادات الترميز

تحقق من إرشادات الترميز الخاصة بنا للحصول على معلومات أكثر تفصيلاً.

كيفية المساهمة

يرجى ملاحظة: يستخدم هذا المشروع مساحات عمل Npm. إذا كنت تريد تشغيل جميع العروض التوضيحية محليًا، فأنت بحاجة إلى الحصول على npm 7+ على الأقل وتثبيت جميع التبعيات عن طريق تنفيذ npm install .

تعتبر Lion Web Components جيدة بقدر مساهماتها. اقرأ دليل المساهمة الخاص بنا ولا تتردد في تعزيز/تحسين الأسد. نبقي طلبات الميزات مغلقة بينما لا نعمل عليها.

اتصال

لا تتردد في إنشاء قضية جيثب لأية تعليقات أو أسئلة قد تكون لديكم.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل