مظهر الفئة

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

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

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

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

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

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

نوع الجزء	الوصف	فئة CSS التلقائية
المحتوى	div الذي يحتوي على جميع الفئات	blocklyToolboxCategoryGroup
الحاوية	العنصر div الذي يحتوي على فئة واحدة وفئاتها الفرعية	blocklyToolboxCategoryContainer
الصف	div الذي يحتوي على الفئة	blocklyToolboxCategory
rowcontentcontainer	div الذي يحتوي على التصنيف والرمز	blocklyTreeRowContentContainer
رمز	span الذي يحتوي على الرمز	blocklyToolboxCategoryIcon
التصنيف	تمثّل span التصنيف.	blocklyToolboxCategoryLabel
تم اختيارها	تمت الإضافة إلى "الصف" div عند اختيار الفئة.	blocklyToolboxSelected
openicon	تتم إضافتها إلى الرمز span عند فتح فئة تتضمّن فئات فرعية.	blocklyToolboxCategoryIconOpen
closedicon	تتم إضافتها إلى الرمز span عند إغلاق فئة تتضمّن فئات فرعية.	blocklyToolboxCategoryIconClosed

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

أولاً، حدِّد فئات CSS مخصّصة في ملف JSON أو XML الذي يحدّد فئاتك:

JSON

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

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

XML

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

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="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>

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