Select
The <sdpi-select> component provides a styled wrapper of <select>.
Exampleâ
Property Inspector HTML
<sdpi-item label="Select">
<sdpi-select setting="color" placeholder="Please choose a color">
<optgroup label="Primary Colors">
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
</optgroup>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
</sdpi-select>
</sdpi-item>
Resultâ
value
The value of <sdpi-select> can be represented as a boolean, number or string, based on the value-type; the default type is string.
{
"value": true | 1 | "one"
}
Configurationâ
The component supports the following configuration.
| Name | Type | Description |
|---|---|---|
default | string | The default value; shown when the persisted value is undefined. |
disabled | boolean | Determines whether the input is disabled. |
placeholder | string | Optional placeholder text shown in the input. |
value | boolean, number, or string | The value of the component, and the persisted setting. |
value-type | 'boolean', 'number', or 'string' | Optional, the preferred value type of the persisted setting; when 'boolean', 'false' and 0 will equate in false. Defaults to 'string'. |
Data Sourceâ
tip
Optionally, this components options can be loaded dynamically using the datasource attribute. When specified, this loads the options from the plugin, read more.
| Name | Type | Description |
datasource | string | The optional remote data source. |
hot-reload | boolean | When present, sendToPropertyInspector is actively monitored allowing for the plugin to update the items. |
loading | string | When a datasource is specified, this text is shown whilst the items are loaded. |
show-refresh | boolean | When present, a refresh button is displayed next to the input. |
Persistenceâ
The value of the component can be automatically persisted to the Stream Deck with the following configuration.
| Name | Type | Description |
global | boolean | When present, the value will be persisted to the global settings. |
label-setting | string | The path of the property where the label should be persisted in the settings; when reloading, if the original value is not available, this label is rendered as a disabled option. |
setting | string | The path of the property where the value should be persisted in the settings. |
setting
The setting represents the path of a property. If required, this path can denote a nested property within the settings, e.g. if the setting were foo.bar.prop, the value would be saved to:
{
"foo": {
"bar": {
"prop": <value>
}
}
}