Skip to main content

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

ParameterType
valueany[]

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

ParameterType
valueboolean

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 parameterDescription
T extends HTMLElementThe type of the UI component element.
S extends Record<string, any>The type of the component state.
Parameters
ParameterTypeDescription
templateStatefullComponent<S>The stateful component template function.
stateSThe 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

Component . create

create(template)

static create<T>(template): T

Creates a new UI component instance based on the provided template and initial state.

Type parameters
Type parameterDescription
T extends HTMLElementThe type of the UI component element.
Parameters
ParameterTypeDescription
templateStatelessComponentThe stateless component template function.
Returns

T

The created UI component element.

Inherited from

Component . create

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