מראה הקטגוריה

‫Blockly מספק ממשק משתמש של קטגוריות שמוגדר כברירת מחדל, ודרכו אפשר להשתמש באפשרויות בסיסיות לעיצוב. אם אתם רוצים מידע על הגדרות מתקדמות יותר של סגנון או תצורה של ממשק המשתמש, כדאי לעיין בסדנת התכנות בנושא התאמה אישית של ארגז הכלים של Blockly ובהרצאה בנושא ממשקי ה-API של ארגז הכלים משנת 2021.

ארגז כלים לקטגוריות עם שש קטגוריות. הקטגוריה Variables (משתנים) פתוחה ומכילה בלוקים של getter ו-setter של משתנים. הצבע של הבלוקים תואם לצבע של הפס האנכי שמימין לשם הקטגוריה Variables (משתנים).

שירות CSS לקטגוריה

אפשר להשתמש ב-CSS כדי לעצב את ארגזי הכלים של הקטגוריות. הערך של כל קטגוריה מחולק לכמה חלקים, כמו הסמל, התווית והשורה שמכילה את הסמל והתווית. אפשר להגדיר סגנון לכל חלק בנפרד.

כברירת מחדל, כל החלקים מאותו סוג (למשל, כל התוויות) מקבלים את אותו סיווג CSS. משתמשים במחלקה הזו אם רוצים להגדיר סגנון לכל החלקים מאותו סוג באותו אופן. לדוגמה, אתם רוצים שכל התוויות יהיו באותו צבע.

אפשר גם להקצות לכל חלק בנפרד מחלקת CSS משלו. כדאי להשתמש בשיטה הזו אם רוצים להגדיר סגנון שונה לחלקים שונים. לדוגמה, אתם רוצים שלכל תווית יהיה צבע משלה.

בטבלה הבאה מפורטים הסוגים, התיאורים ושיעורי ה-CSS שמוגדרים כברירת מחדל של כל חלק בארגז הכלים של הקטגוריה. אם קשה לכם לדמיין את זה, פתחו את הכלים למפתחים בדפדפן ובדקו את ארגז הכלים.

סוג החלק תיאור מחלקת CSS שמוגדרת כברירת מחדל
contents הקטגוריה 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}

עיצובים

העיצובים מאפשרים לכם להגדיר את כל הצבעים של סביבת העבודה בבת אחת, כולל הצבעים של הקטגוריות.

כדי להשתמש בהם, צריך לשייך את הקטגוריה לסגנון קטגוריה מסוים:

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>

שימו לב שאפשר גם להשתמש בהפניות לתרגום של צבעים.