Separators

AI-generated Key Takeaways

• Adding a separator between categories creates a line and extra space between them.

• You can customize the separator's appearance by changing its class in your toolbox definition (JSON or XML).

• Adding a separator between blocks creates a gap between them, which can be customized using the 'gap' attribute.

• Separators and gaps help create logical groups of blocks in the toolbox.

Adding a separator between any two categories will create a line and extra space between the two categories.

You can change the class for the separator in your JSON or XML toolbox definition.

JSON

{
  "kind": "sep",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

<sep css-container="yourClassName"></sep>

Adding a separator between any two blocks will create a gap between the blocks. By default every block is separated from its lower neighbour by 24 pixels. This separation may be changed using the 'gap' attribute, which will replace the default gap.

This allows you to create logical groups of blocks in the toolbox.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"math_number"
    },
    {
      "kind": "sep",
      "gap": "32"
    },
    {
      "kind": "block",
      "type"" "math_arithmetic"
      "fields": {
        "OP": "ADD"
      },
    },
    {
      "kind": "sep",
      "gap": "8"
    },
    {
      "kind": "block",
      "type"" "math_arithmetic"
      "fields": {
        "OP": "MINUS"
      },
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="math_number"></block>
  <sep gap="32"></sep>
  <block type="math_arithmetic">
    <field name="OP">ADD</field>
  </block>
  <sep gap="8"></sep>
  <block type="math_arithmetic">
    <field name="OP">MINUS</field>
  </block>
</xml>