مظهر الفئة

توفِّر أداة Blockly واجهة مستخدم تلقائية للفئات، بالإضافة إلى بعض الخيارات الأساسية ل التنسيق. للحصول على معلومات عن كيفية إجراء المزيد من عمليات التصميم/الضبط المتقدمة لواجهة المستخدم، يمكنك الاطّلاع على مختبر رموز برمجية لتخصيص مجموعة أدوات Blockly ومحادثة 2021 حول واجهات برمجة تطبيقات Toolbox.

المظاهر

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

لاستخدامها، عليك ربط الفئة بنمط فئة معيّن:

JSONXML

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

<category name="Logic" categorystyle="logic_category"></category>

الألوان

يمكنك أيضًا تحديد اللون مباشرةً، ولكن لا يُنصح بذلك. ‫ اللون هو رقم محوَّل إلى سلسلة (من 0 إلى 360) يحدِّد درجة اللون. يُرجى مراعاة قواعد الإملاء البريطانية.

JSONXML

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="210">...</category>
  <category name="Loops" colour="120">...</category>
  <category name="Math" colour="230">...</category>
  <category name="Colour" colour="20">...</category>
  <category name="Variables" colour="330" custom="VARIABLE"></category>
  <category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>

يُرجى العلم أنّنا نسمح أيضًا باستخدام مراجع الألوان القابلة للترجمة.

ملف CSS الخاص بالفئة

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

يمكن تطبيق فئات CSS على أنواع العناصر التالية:

• حاوية: فئة div الرئيسية للفئة. الإعداد التلقائي blocklyToolboxCategory
• صف - فئة div التي تحتوي على تصنيف الفئة ورمزها الإعداد التلقائي blocklyTreeRow
• icon: فئة رمز الفئة الإعداد التلقائي هو blocklyTreeIcon.
• label: فئة تصنيف الفئة الإعداد التلقائي هو blocklyTreeLabel.
• selected: الصف الذي تتم إضافته إلى الفئة عند اختياره الإعداد التلقائي blocklyTreeSelected
• رمز مفتوح: الفئة التي تمت إضافتها إلى رمز عندما تكون الفئة تحتوي على فئات مضمّنة وتكون مفتوحة. الإعداد التلقائي هو blocklyTreeIconOpen.
• رمز مغلق: الصف الذي تمت إضافته إلى رمز عندما تكون الفئة تحتوي على فئات مضمّنة ومغلقة. الإعداد التلقائي هو blocklyTreeIconClosed.

في ما يلي كيفية تحديد الفئات باستخدام أيّ من التنسيقَين:

JSONXML

يمكنك ضبط فئة CSS لنوع عنصر معيّن باستخدام السمة cssConfig.

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

يمكنك ضبط فئة CSS لنوع عنصر معيّن عن طريق الإضافة "css-" قبلها.

<category name="..." css-container="yourClassName"></category>