7.0.1685-testing
In this page
<gui-select />
Example
Display an array of strings
const el = document.createElement('div');
const select = document.createElement('gui-select');
const selectedItem = document.createElement('span');
const fruits = [
'apple',
'banana',
'cherry',
'date',
'elderberry',
'fig',
'grape',
'honeydew',
'kiwi',
'lemon',
'mango',
'nectarine',
'orange',
'pear',
'quince',
'raspberry',
'strawberry',
'tangerine',
'ugli',
'watermelon',
];
select.options = fruits;
select.placeholder = 'Search value';
select.addEventListener('gui-change', (ev) => {
selectedItem.textContent = `Selected: ${ev.detail}`;
});
el.appendChild(select);
el.appendChild(selectedItem);
Properties
Name | Type | Description |
---|---|---|
options |
IOption[] |
The list of options |
Events
Name | Detail | Description |
---|---|---|
gui-change |
The selected IOption.value |
Triggered when the selected option changes |
IOption
export type GuiOption<T = any> = {
value: T;
/** If defined this is the text of the option, otherwise `value.toString()` will be used */
text?: string;
selected?: boolean;
};
export type IOption<T = any> = GuiOption<T> | string;