@blockly/field-grid-dropdown
A Blockly dropdown field with grid layout.
Installation
Yarn
yarn add @blockly/field-grid-dropdown
npm
npm install @blockly/field-grid-dropdown --save
Usage
This field accepts the same parameters as the Blockly.FieldDropdown in Blockly core. The config object bag passed into this field accepts additional optional parameters:
"columns"
to specify the number of columns in the dropdown field (must be an integer greater than 0). If not provided, the default is 3 columns."primaryColour"
to specify the colour of the dropdown (must be a string CSS colour). If not provided, the dropdown color will match the primary colour of the parent block."borderColour"
to specify the colour of the border of the dropdown (must be a string CSS colour). If not provided, the border colour will match the tertiary colour of the parent block.
JavaScript
import * as Blockly from 'blockly';
import {FieldGridDropdown} from '@blockly/field-grid-dropdown';
Blockly.Blocks["test_field_grid_dropdown"] = {
init: function () {
this.appendDummyInput()
.appendField("grid dropdown: ")
.appendField(new FieldGridDropdown([
["A", "A"],["B", "B"], ["C", "C"],["D", "D"], ["E", "E"], ["F", "F"],
["G", "G"], ["H", "H"]]), "FIELDNAME");
}
};
JSON
import * as Blockly from 'blockly';
import '@blockly/field-grid-dropdown';
Blockly.defineBlocksWithJsonArray([
{
"type": "test_field_grid_dropdown",
"message0": "template: %1",
"args0": [
{
"type": "field_grid_dropdown",
"name": "FIELDNAME",
"options": [
["A", "A"],["B", "B"], ["C", "C"],["D", "D"],
["E", "E"], ["F", "F"], ["G", "G"], ["H", "H"]
]
}
]
}]);
License
Apache 2.0