कैटगरी का दिखना

Blockly में, कैटगरी का डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) उपलब्ध होता है. साथ ही, इसमें स्टाइल देने के लिए कुछ बुनियादी विकल्प भी होते हैं. अगर आपको यूज़र इंटरफ़ेस (यूआई) की स्टाइलिंग/कॉन्फ़िगरेशन को बेहतर बनाने का तरीका जानना है, तो Blockly टूलबॉक्स को पसंद के मुताबिक बनाने के लिए कोडलैब और 2021 टूलबॉक्स एपीआई टॉक देखें.

थीम

थीम की मदद से, अपने फ़ाइल फ़ोल्डर के सभी रंगों को एक साथ तय किया जा सकता है. इनमें आपकी कैटगरी के रंग भी शामिल हैं.

इनका इस्तेमाल करने के लिए, आपको अपनी कैटगरी को किसी खास कैटगरी स्टाइल से जोड़ना होगा:

JSONXML

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

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

रंग

सीधे रंग भी डाला जा सकता है, लेकिन हमारा सुझाव है कि ऐसा न करें. रंग, रंग की जानकारी देने वाला एक स्ट्रिंग फ़ॉर्मैट में मौजूद नंबर (0-360) होता है. ब्रिटिश स्पेलिंग का ध्यान रखें.

JSONXML

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

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

ध्यान दें कि हम स्थानीय भाषा में उपलब्ध रंग के रेफ़रंस का इस्तेमाल करने की सुविधा भी देते हैं.

कैटगरी सीएसएस

अगर आपको ज़्यादा बेहतर तरीके से कस्टमाइज़ करना है, तो Blockly की मदद से डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) के अलग-अलग एलिमेंट के लिए सीएसएस क्लास तय की जा सकती हैं. इसके बाद, इनके लिए सीएसएस का इस्तेमाल करके स्टाइल तय की जा सकती है.

इन एलिमेंट टाइप पर सीएसएस क्लास लागू की जा सकती हैं:

• container - कैटगरी के पैरंट div के लिए क्लास. डिफ़ॉल्ट blocklyToolboxCategory.
• row - कैटगरी लेबल और आइकॉन वाले div के लिए क्लास. डिफ़ॉल्ट blocklyTreeRow.
• icon - कैटगरी आइकॉन की क्लास. डिफ़ॉल्ट blocklyTreeIcon.
• label - कैटगरी लेबल के लिए क्लास. डिफ़ॉल्ट blocklyTreeLabel.
• selected - चुनी गई क्लास, कैटगरी में जोड़ी जाती है. डिफ़ॉल्ट blocklyTreeSelected.
• openicon - जब कैटगरी में नेस्ट की गई कैटगरी हों और वह खुली हो, तब आइकॉन में जोड़ी गई क्लास. डिफ़ॉल्ट blocklyTreeIconOpen.
• closedicon - जब कैटगरी में नेस्ट की गई कैटगरी हों और वह बंद हो, तब आइकॉन में जोड़ी गई क्लास. डिफ़ॉल्ट blocklyTreeIconClosed.

इनमें से किसी भी फ़ॉर्मैट का इस्तेमाल करके क्लास की जानकारी देने का तरीका यहां बताया गया है:

JSONXML

cssConfig प्रॉपर्टी का इस्तेमाल करके, किसी खास टाइप के एलिमेंट की सीएसएस क्लास सेट करें.

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

किसी खास एलिमेंट टाइप की सीएसएस क्लास सेट करने के लिए, उसके आगे 'css-' जोड़ें.

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