BaseDropDownList

a multipurpose drop-down list

Props

Prop name	Description	Type	Values	Default
dropDownOptions	list of options to select from, this needs to be an object with identifier and label (the actual property names can be adapted with identifierPropertyName and labelPropertyName respectively)	array	-	[]
identifierPropertyName	specify the name of a property that can be used as identifier	string	-	'id'
labelPropertyName	specify the name of the property that should be displayed	string	-	'value'
activeOption	specify the currently active option (will have gray background if not disabled by setting activeStyled false) for example for combination with input and keyboard use	object	-	{}
selectedOption	specify the currently selected option (will appear in app color if not disabled by setting selectStyled false, but also used for aria-selected). the v-model directive can be used here	object	-	{}
listId	in order to link the drop-down body to an <input> element specify a list id and use the list attribute on the input	string	-	''
listBodyStyle	add styling to the list body (e.g. max-height) (useful if slots before-list or after-list should not be part of scroll container)	object	-	{}
activeStyled	flag if the currently active element should be styled (gray background)	boolean	-	true
selectStyled	flag if the currently selected entry should be styled (only makes sense for single select, color: app-color)	boolean	-	false
displayAsDropDown	if true the element will be styled as a drop-down element with box-shadow	boolean	-	true
dropDownNoOptionsInfo	message displayed when no selectable options are available	string	-	''
language	specify a language (ISO 639-1) (used for label if label is language specific object e.g. { de: 'xxx', en: 'yyy' }	string	-	''
activeSubOption	this adds the possibility of nested options (thus a second list nested within the first one), if an active sub-option is added, this will have consequences for scroll adjustment of list on keyboard use and how the active option is determined (the identifier property will be used)	object|null	-	() => null
useCustomOptionActiveBackgroundColor	in case a custom option background should be set to the currently active option (this will also apply if activeStyled is set false). if you want to use this option please set the css variable --option-background in your app	boolean	-	false
useHighlightStringMatch	set true if option characters matching a string provided in highlightStringMatch should be highlighted	boolean	-	false
highlightStringMatch	if useHighlightStringMatch is set to true, provide a string to match with the option label here	string	-	''
highlightStringTags	provide tag names to style the matched characters (without '<' and '>', e.g. ['b'] for <b>)	array	-	[]

Events

Event name	Properties	Description
update:selected-option	undefined Object - the selected option	inform parent if option was selected by mouse click (v-model on prop selectedOption can be used)

Slots

Name	Description	Bindings
before-list	for adding elements before the options list
option	a slot to customize every single option (e.g. display of information other than [valuePropertyName])	option Object - the current option in the options list
no-options	customize what is displayed when no drop down options are available
after-list	to add elements after the options list

---

Demo

A list in drop down style. Click the button to display!

An example connected with an input field (displayAsDropDown: false) using all kinds of slots and with useHighlightStringMatch enabled.