مظهر الفئة

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

خدمة مقارنة الأسعار (CSS) للفئة

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

تتألف مجموعة أدوات الفئات من عناصر HTML متعددة، يمثّل كل منها جزءًا مختلفًا من مجموعة الأدوات. على سبيل المثال، تحتوي كل فئة على div خاص بها وspan منفصلَين للرمز والتصنيف. (للحصول على قائمة كاملة، راجِع الجدول أدناه.)

تخصّص Blockly فئة CSS تلقائية لجميع الأجزاء من النوع نفسه. على سبيل المثال، يتم تعيين blocklyToolboxCategoryLabel لجميع تصنيفات span. استخدِم هذه الفئات لتصميم جميع الأجزاء من النوع نفسه بالطريقة نفسها، مثل تعيين اللون نفسه لجميع التصنيفات. تستخدم Blockly هذه الفئات في ملف CSS التلقائي الخاص بأدوات صندوق الفئات.

يمكنك اختياريًا تعيين فئات CSS مخصّصة لأجزاء فردية. على سبيل المثال، يمكنك تعيين فئات CSS مختلفة لكل تصنيف span. استخدِم هذه الفئات لتنسيق أجزاء مختلفة من النوع نفسه بطرق مختلفة، مثل تعيين لون مختلف لكل تصنيف.

فئات CSS التلقائية

يسرد الجدول التالي الأنواع والأوصاف وفئات CSS التلقائية لكل جزء من صندوق أدوات الفئات. إذا كنت تواجه صعوبة في تصور ذلك، افتح أدوات المطوّرين في متصفحك وافحص صندوق الأدوات.

نوع الجزء	الوصف	فئة CSS التلقائية
المحتوى	div الذي يحتوي على جميع الفئات	blocklyToolboxCategoryGroup
الحاوية	العنصر div الذي يحتوي على فئة واحدة وفئاتها الفرعية	blocklyToolboxCategoryContainer
صف	تمثّل هذه السمة div الذي يحتوي على الفئة.	blocklyToolboxCategory
rowcontentcontainer	div الذي يحتوي على التصنيف والرمز	blocklyTreeRowContentContainer
رمز	span الذي يحتوي على الرمز	blocklyToolboxCategoryIcon
التصنيف	span الذي يحتوي على التصنيف	blocklyToolboxCategoryLabel

تُستخدَم CSS أيضًا لتصنيف حالة بعض أجزاء شريط الأدوات.

ولاية	الوصف	فئة CSS التلقائية
تم اختيار علامة التبويب هذه	تمت الإضافة إلى "الصف" div عند اختيار الفئة.	blocklyToolboxSelected
openicon	تتم إضافتها إلى الرمز span عند فتح فئة تتضمّن فئات فرعية.	blocklyToolboxCategoryIconOpen
closedicon	تتم إضافتها إلى الرمز span عند إغلاق فئة تتضمّن فئات فرعية.	blocklyToolboxCategoryIconClosed

فئات CSS المخصّصة

لتحديد فئات CSS مخصّصة، استخدِم السمة cssConfig في تعريفات أدوات JSON أو سمات css- في تعريفات أدوات XML، واستخدِم نوع الجزء لتحديد الجزء الذي تريد تحديد فئات له.

على سبيل المثال، لنفترض أنّك تريد أن تكون كل التصنيفات باللون الأبيض، ولكن لكل فئة لون خلفية خاص بها. يمكنك استخدام الفئة التلقائية للتصنيفات، ولكن عليك إضافة فئات مخصّصة لصف كل فئة.

تحدّد تعريفات الفئات التالية فئات CSS مخصّصة لكل صف من صفوف الفئات. لاحظ أنّ الفئة التلقائية للصفوف (blocklyToolboxCategory) مضمّنة في كل تعريف. ويرجع ذلك إلى أنّ Blockly يستبدل السمة class الخاصة بالصف عند تحديد الفئات. إذا لم تضمّن الفئة التلقائية، لن تحصل على CSS التلقائي لهذه الفئة.

JSON

اضبط فئات CSS المخصّصة باستخدام السمة cssConfig.

{
  "kind": "category",
  "name": "My category",
  "cssConfig": {
    "row": "blocklyToolboxCategory myRow"  // Use the part type ("row") as a key.
  },
  "contents": [...],
},
{
  "kind": "category",
  "name": "Your category",
  "cssConfig": {
    "row": "blocklyToolboxCategory yourRow"
  },
  "contents": [...],
},

XML

اضبط فئات CSS مخصّصة باستخدام سمة يكون اسمها هو نوع الجزء مع إضافة css- في بدايته.

<category name="My category" css-row="blocklyToolboxCategory myRow">
  ...
</category>
<category name="Your category" css-row="blocklyToolboxCategory yourRow">
  ...
</category>

في ملف CSS، استخدِم الفئات المخصّصة لتعيين ألوان الصفوف والفئة التلقائية لتعيين لون التصنيف:

.myRow {background-color: green}
.yourRow {background-color: red}
.blocklyToolboxCategoryLabel {color: white}

المظاهر

ملاحظة: مع أنّ السمات متاحة، ننصحك باستخدام CSS بدلاً من السمات لتصميم فئاتك.

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

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

JSON

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

XML

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

الألوان

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

JSON

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

XML

<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>

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