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>
}
}
}