@blockly/field-grid-dropdown 

A Blockly dropdown field with grid layout.



Installation

$3

``
yarn add @blockly/field-grid-dropdown
`

$3

`
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.

$3

`js
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',
);
},
};
`

$3

`js
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