Dropdown
A custom dropdown web component for BIM applications.
Extends
Implements
Properties
icon?
optional
icon:string
The icon to be displayed in the dropdown.
Default
undefined
Examples
<bim-dropdown icon="exampleIcon"></bim-dropdown>
const dropdown = document.createElement('bim-dropdown');
dropdown.icon = 'exampleIcon';
label?
optional
label:string
The label to be displayed in the dropdown.
Default
undefined
Examples
<bim-dropdown label="Example Label"></bim-dropdown>
const dropdown = document.createElement('bim-dropdown');
dropdown.label = 'Example Label';
Implementation of
HasName.label
multiple
multiple:
boolean
=false
Indicates whether multiple options can be selected in the dropdown.
Default
false
Examples
<bim-dropdown multiple></bim-dropdown>
const dropdown = document.createElement('bim-dropdown');
dropdown.multiple = true;
name?
optional
name:string
The name of the dropdown.
Default
undefined
Examples
<bim-dropdown name="exampleName"></bim-dropdown>
const dropdown = document.createElement('bim-dropdown');
dropdown.name = 'exampleName';
Implementation of
HasName.name
required
required:
boolean
=false
Indicates whether a selection is required in the dropdown.
Default
false
Examples
<bim-dropdown required></bim-dropdown>
const dropdown = document.createElement('bim-dropdown');
dropdown.required = true;
vertical
vertical:
boolean
=false
Indicates whether the dropdown should be displayed vertically.
Default
false
Examples
<bim-dropdown vertical></bim-dropdown>
const dropdown = document.createElement('bim-dropdown');
dropdown.vertical = true;
styles
static
styles:CSSResult
[]
CSS styles for the component.
Overrides
Component.styles
Accessors
value
set
value(value
):void
The selected values in the dropdown.
Example
const dropdown = document.createElement('bim-dropdown');
dropdown.value = ['option1', 'option2'];
Parameters
Parameter | Type |
---|---|
value | any [] |
visible
set
visible(value
):void
Indicates whether the dropdown it-self (not the component) is visible.
Default
false
Examples
<bim-dropdown visible></bim-dropdown>
const dropdown = document.createElement('bim-dropdown');
dropdown.visible = true;
Parameters
Parameter | Type |
---|---|
value | boolean |
Methods
create()
create(template, state)
static
create<T
,S
>(template
,state
): [T
,UpdateFunction
<S
>, () =>S
]
Creates a new UI component instance based on the provided template and initial state.
Type parameters
Type parameter | Description |
---|---|
T extends HTMLElement | The type of the UI component element. |
S extends Record <string , any > | The type of the component state. |
Parameters
Parameter | Type | Description |
---|---|---|
template | StatefullComponent <S > | The stateful component template function. |
state | S | The initial state of the component. |
Returns
[T
, UpdateFunction
<S
>, () => S
]
An array containing the created UI component element and a function to update its state.
Inherited from
create(template)
static
create<T
>(template
):T
Creates a new UI component instance based on the provided template and initial state.
Type parameters
Type parameter | Description |
---|---|
T extends HTMLElement | The type of the UI component element. |
Parameters
Parameter | Type | Description |
---|---|---|
template | StatelessComponent | The stateless component template function. |
Returns
T
The created UI component element.
Inherited from
Events
onValueChange
onValueChange:
Event
Event that is fired when the value of the dropdown changes. This event is fired when the user selects or deselects an option.
change
Example
dropdown.addEventListener('change', (event) => {
console.log('Dropdown value changed:', event.target.value);
});
Implementation of
HasValue.onValueChange