टूलबॉक्स में जहां ब्लॉक डाला जा सकता है वहां बटन या लेबल भी डाला जा सकता है.
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type":"logic_operation"
},
{
"kind": "label",
"text": "A label",
"web-class": "myLabelStyle"
},
{
"kind": "label",
"text": "Another label"
},
{
"kind": "block",
"type": "logic_negate"
},
{
"kind": "button",
"text": "A button",
"callbackKey": "myFirstButtonPressed"
},
{
"kind": "block",
"type": "logic_boolean"
}
]
}
<xml id="toolbox" style="display: none">
<block type="logic_operation"></block>
<label text="A label" web-class="myLabelStyle"></label>
<label text="Another label"></label>
<block type="logic_negate"></block>
<button text="A button" callbackKey="myFirstButtonPressed"></button>
<block type="logic_boolean"></block>
</xml>
<style>
.myLabelStyle>.blocklyFlyoutLabelText {
font-style: italic;
fill: green;
}
</style>
अपने बटन या लेबल पर लागू करने के लिए, सीएसएस क्लास का नाम दिया जा सकता है. ऊपर दिए गए उदाहरण में, पहला लेबल कस्टम स्टाइल का इस्तेमाल करता है, जबकि दूसरा लेबल डिफ़ॉल्ट स्टाइल का इस्तेमाल करता है.
बटन में कॉलबैक फ़ंक्शन होने चाहिए, लेकिन लेबल में नहीं. किसी बटन पर क्लिक करने के लिए कॉलबैक सेट करने के लिए,
yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).
आपका फ़ंक्शन, क्लिक किए गए बटन को आर्ग्युमेंट के तौर पर स्वीकार करना चाहिए. वैरिएबल कैटगरी में मौजूद "वैरिएबल बनाएं..." बटन, कॉलबैक वाले बटन का एक अच्छा उदाहरण है.