אפשר להוסיף לחצן או תווית בכל מקום שאפשר להוסיף בלוק בארגז הכלים.
JSON
{
"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
<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>
אפשר לציין שם של מחלקת CSS להחלה על הלחצן או התווית. בדוגמה שלמעלה, התווית הראשונה משתמשת בסגנון מותאם אישית, ואילו התווית השנייה משתמשת בסגנון ברירת המחדל.
ללחצנים צריכות להיות פונקציות קריאה חוזרת, אבל לא לתוויות. כדי להגדיר את הקריאה החוזרת (callback) ללחיצה על לחצן מסוים, משתמשים ב
yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).
הפונקציה צריכה לקבל כארגומנט את הלחצן שעליו לחצו. הלחצן Create variable... (יצירת משתנה...) בקטגוריית המשתנים הוא דוגמה טובה ללחצן עם קריאה חוזרת.