مظهر الفئة

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

ملف CSS للفئة

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

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

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

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

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

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

نوع الجزء	الوصف	فئة CSS التلقائية
contents	عنصر div الذي يحتوي على جميع الفئات	blocklyToolboxCategoryGroup
container	عنصر div الذي يحتوي على فئة واحدة وفئاتها الفرعية	blocklyToolboxCategoryContainer
row	عنصر div الذي يحتوي على الفئة	blocklyToolboxCategory
rowcontentcontainer	عنصر div الذي يحتوي على التصنيف والرمز	blocklyTreeRowContentContainer
icon	عنصر span الذي يحتوي على الرمز	blocklyToolboxCategoryIcon
label	عنصر 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>

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