solid blocks

حانات صلبة

لبنات بناء واجهة المستخدم لـ SolidJs

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

مكونات قيمة بدلاً من المكونات دون قيمة مضافة

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

• تجربة المستخدم
• إمكانية الوصول
• تجربة المطور
• أداء

إذا لم يكن من الممكن توفير أي من هذه المزايا ، فمن الأفضل استخدام عناصر HTML الأصلية أو قدرات SolidJs مثل البوابة بشكل فعال.

المكونات ذات الأناقة بدلاً من المكونات المصممة

يعبّر استخدام CSS مباشرةً في الوقت الحاضر ، ولكن ليس على حق. سوف تتفوق CSS المصنوعة جيدًا بسهولة على المكونات المصممة. يجب أن تفعل ذلك مع

• الحد الأدنى من النزيف (بادئة الفئة sb-[component] ، إعادة تعيين CSS ، الأنماط الأساسية ، متغيرات السمة)
• أسماء الصف الدلالي ، أي .primary.sb-button
• دراسة متأنية لـ A11y
• يعمل قدر الإمكان في بيئات غير JS (SSR)
• المظهر ، وضع الظلام ، مفتاح الوضع المضمّن ممكن
• TODO: تخطيط مستجيب

الاستخدام

yarn
yarn dev

لاستخدام المكونات

 import { Accordion , AccordionHeader } from "solid-blocks" ;

const MyApp = ( ) => {
  return (
    < Accordion >
      < AccordionHeader > Accordion </ AccordionHeader >
      < p > Hidden </ p >
    </ Accordion >
  ) ;
} ;