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

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

עיצובים

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

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

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>

שימו לב: אנחנו תומכים גם בשימוש בהפניות לצבע שניתן להתאמה לשוק המקומי.

קטגוריית CSS

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

אפשר להחיל כיתות CSS על סוגי הרכיבים הבאים:

• container – הכיתה של ה-div ההורה של הקטגוריה. ברירת המחדל היא blocklyToolboxCategory.
• row – הכיתה של ה-div שמכיל את התווית ואת הסמל של הקטגוריה. ברירת המחדל היא blocklyTreeRow.
• icon – הכיתה של סמל הקטגוריה. ברירת המחדל היא blocklyTreeIcon.
• label – הכיתה של תווית הקטגוריה. ברירת המחדל היא blocklyTreeLabel.
• selected – הכיתה שנוספת לקטגוריה כשהיא מסומנת. ברירת המחדל היא blocklyTreeSelected.
• openicon – הכיתה שנוספה לסמל כשהקטגוריה פתוחה ויש בה קטגוריות בתצוגת עץ. ברירת המחדל היא blocklyTreeIconOpen.
• closedicon – הכיתה מתווספת לסמל כשהקטגוריה מכילה קטגוריות בתצוגת עץ וסגורה. ברירת המחדל היא blocklyTreeIconClosed.

כך מציינים את הכיתות בכל אחד מהפורמטים:

JSON

מגדירים את סיווג ה-CSS של סוג אלמנט מסוים באמצעות המאפיין cssConfig.

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

XML

כדי להגדיר את סיווג ה-CSS של סוג אלמנט מסוים, מוסיפים לו את הקידומת 'css-'.

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