Düğmeler ve etiketler

Araç kutusunda blok yerleştirebildiğiniz her yere düğme veya etiket koyabilirsiniz.

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>

Düğmenize veya etiketinize uygulanacak bir CSS sınıf adı belirtebilirsiniz. Yukarıdaki örnekte, ilk etikette özel stil, ikinci etikette ise varsayılan stil kullanılmıştır.

Düğmelerde geri çağırma işlevleri olmalı, etiketlerde olmamalıdır. Belirli bir düğme tıklaması için geri aramayı ayarlamak üzere

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

İşleviniz, tıklanan düğmeyi bağımsız değişken olarak kabul etmelidir. Değişken kategorisindeki "Değişken oluştur..." düğmesi, geri çağırma işlevi olan bir düğmeye iyi bir örnektir.