फ़ाइल फ़ोल्डर पर टिप्पणी एक ग्राफ़िकल एलिमेंट होती है, जिसमें टेक्स्ट डाला जा सकता है. आम तौर पर, इसका इस्तेमाल आपके कोड से जुड़ी चीज़ों का दस्तावेज़ तैयार करने के लिए किया जाता है. ठीक वैसे ही, जैसे टेक्स्ट पर आधारित प्रोग्रामिंग भाषा में की गई टिप्पणियां.
फ़ाइल फ़ोल्डर की टिप्पणियां चालू करें
अपने ऐप्लिकेशन में फ़ाइल फ़ोल्डर की टिप्पणियां चालू करने के लिए, आपको उपयोगकर्ताओं को उन्हें बनाने का कोई तरीका देना होगा. ऐसा करने का एक तरीका यह है कि आप संदर्भ मेन्यू आइटम जोड़ें, जो फ़ाइल फ़ोल्डर की टिप्पणी बनाता है. इस कोड की मदद से फ़ाइल फ़ोल्डर में टिप्पणियां बनाने, मिटाने, और डुप्लीकेट बनाने के लिए, संदर्भ मेन्यू में डिफ़ॉल्ट आइटम रजिस्टर किए जा सकते हैं:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
आप अपने संदर्भ मेन्यू के विकल्प भी खुद बना सकते हैं या उपयोगकर्ता के लिए फ़ाइल फ़ोल्डर में टिप्पणियां जोड़ने का कोई दूसरा तरीका जोड़ सकते हैं. संदर्भ मेन्यू के विकल्पों के बारे में ज़्यादा जानने के लिए, कॉन्टेक्स्ट मेन्यू देखें.
विज़ुअल तरीके से टिप्पणियों को पसंद के मुताबिक बनाना
Workspace की टिप्पणियों के लुक को पसंद के मुताबिक बनाने के कई तरीके हैं. ये थीम के बजाय, सीएसएस का इस्तेमाल करते हैं. टिप्पणी के अलग-अलग हिस्सों के ज़्यादातर रंगों और साइज़ को कंट्रोल किया जा सकता है, न कि उनकी पोज़िशन कैसे तय की गई है.
कलर सीएसएस वैरिएबल
टेक्स्ट एरिया के बैकग्राउंड का रंग बदलने के लिए, commentFillColour सीएसएस वैरिएबल को सेट किया जा सकता है. टिप्पणी के सबसे ऊपर वाले बार और टिप्पणी के बॉर्डर का रंग बदलने के लिए, commentBorderColour सीएसएस वैरिएबल को सेट किया जा सकता है.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
सीएसएस क्लास
टिप्पणी व्यू के अलग-अलग एलिमेंट को असाइन की गई अलग-अलग सीएसएस क्लास होती हैं. इनकी मदद से, एलिमेंट की स्टाइल बदली जा सकती है.
| सीएसएस क्लास | Image |
|---|---|
| ब्लॉकी कॉमेंट, ब्लॉकली ड्रैग किए जा सकने वाले | 
|
| BlocklySelected, blocklycommenthighlight |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklycommentPreview, blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
सीएसएस का बुनियादी इस्तेमाल
ज़्यादातर मामलों में, आपके पास अपने कस्टम एट्रिब्यूट को सही सीएसएस क्लास के साथ लागू करने का विकल्प होता है:
.blocklyCommentTopbarBackground {
height: 50px;
}
टेक्स्ट के लिए सीएसएस
हालांकि, टेक्स्ट के लिए आपको और ज़्यादा खास जानकारी देनी होगी कि रेंडरर से जनरेट हुई सीएसएस को बदला जा सके.
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
चुने गए हाइलाइट के लिए सीएसएस
साथ ही, टिप्पणी को चुने जाने पर उसे हाइलाइट करने के लिए, बदलाव पर सीएसएस
को लागू किया जाना चाहिए. यह इस बात पर निर्भर करता है कि टिप्पणी छोटी की गई है या नहीं. जब यह छोटा हो जाता है, तब आपको सीएसएस को blocklyCommentTopbarBackground पर लागू करना होता है. ऐसा न होने पर, इसे blocklyCommentHighlight पर लागू करें.
/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
stroke: #fc3;
stroke-width: 3px;
}
/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
stroke: none;
}
/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
stroke: #fc3;
stroke-width: 3px;
}
आइकॉन
blocklyFoldoutIcon, blocklyDeleteIcon, और blocklyResizeHandle क्लास
<image> एलिमेंट पर लागू होती हैं. इसका मतलब है कि अगर आपको किसी आइकॉन का रंग या आकार बदलना है, तो मीडिया फ़ोल्डर में कोई दूसरी इमेज शामिल करें.
| Image name | Image |
|---|---|
| फ़ोल्डआउट-arrow.svg | |
| delete-icon.svg | |
| resize-handle.svg | |
हटाएं आइकन
'मिटाएं' आइकॉन डिफ़ॉल्ट रूप से छिपा होता है. अगर आपको इसे चालू करना है, तो सीएसएस का इस्तेमाल करके इसे दिखाएं:
.blocklyDeleteIcon {
display: block;
}