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

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

छह कैटगरी वाला टूलबॉक्स. वैरिएबल कैटगरी खुली हो और उसमें वैरिएबल गेटर और सेटर ब्लॉक मौजूद हों. ब्लॉक का रंग, Variables कैटगरी के नाम के बाईं ओर मौजूद वर्टिकल बार के रंग से मेल खाता है.

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

सीएसएस का इस्तेमाल करके, कैटगरी टूलबॉक्स को स्टाइल किया जा सकता है. हर कैटगरी की एंट्री को कई हिस्सों में बांटा गया है. जैसे, उसका आइकॉन, उसका लेबल, और आइकॉन और लेबल वाली लाइन. हर हिस्से को अलग-अलग स्टाइल किया जा सकता है.

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

हर हिस्से को उसकी सीएसएस क्लास भी असाइन की जा सकती है. अगर आपको हर हिस्से को अलग-अलग स्टाइल में दिखाना है, तो इस तरीके का इस्तेमाल करें. उदाहरण के लिए, आपको हर लेबल के लिए अलग रंग चाहिए.

यहां दी गई टेबल में, कैटगरी टूलबॉक्स के हर हिस्से के टाइप, ब्यौरे, और डिफ़ॉल्ट सीएसएस क्लास के बारे में बताया गया है. अगर आपको इसे समझने में परेशानी हो रही है, तो अपने ब्राउज़र में डेवलपर टूल खोलें और टूलबॉक्स की जांच करें.

पार्ट का टाइप ब्यौरा डिफ़ॉल्ट सीएसएस क्लास
सामग्री div जिसमें सभी कैटगरी शामिल होती हैं. blocklyToolboxCategoryGroup
कंटेनर div, जिसमें एक कैटगरी और उसकी सबकैटगरी शामिल होती हैं. blocklyToolboxCategoryContainer
पंक्ति वह div जिसमें कैटगरी शामिल है. blocklyToolboxCategory
rowcontentcontainer वह div जिसमें लेबल और आइकॉन मौजूद है. blocklyTreeRowContentContainer
आइकॉन वह span जिसमें आइकॉन मौजूद है. blocklyToolboxCategoryIcon
लेबल वह span जिसमें लेबल मौजूद है. blocklyToolboxCategoryLabel
चुना गया कैटगरी चुनने पर, इसे "लाइन" div में जोड़ दिया जाता है. blocklyToolboxSelected
openicon जब सब-कैटगरी वाली कोई कैटगरी खुली होती है, तब इसे "आइकॉन" span में जोड़ा जाता है. blocklyToolboxCategoryIconOpen
closedicon जब सब-कैटगरी वाली कोई कैटगरी बंद की जाती है, तब इसे "आइकॉन" span में जोड़ा जाता है. blocklyToolboxCategoryIconClosed

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

दो कैटगरी वाला टूलबॉक्स. दोनों कैटगरी के लेबल का रंग सफ़ेद है, लेकिन इनके बैकग्राउंड का रंग अलग-अलग है.

सबसे पहले, अपनी कैटगरी तय करने वाले JSON या XML में कस्टम सीएसएस क्लास असाइन करें:

JSON

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- प्रीपेंड किया गया हो.

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="yourRow">
  ...
</category>

अपनी सीएसएस फ़ाइल में, लाइन के रंग असाइन करने के लिए कस्टम क्लास और लेबल का रंग असाइन करने के लिए डिफ़ॉल्ट क्लास का इस्तेमाल करें:

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

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