# BaseDropDownList

a multipurpose drop down list

# Props

Prop name Description Type Values Default
dropDownOptions list of options to select from array - []
identifierPropertyName specify the name of a property that can be used as identifier
// TODO: need handling if no identifier provided!!
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|string - () => ({})
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 .sync modifier can be used here
object|string - () => ({})
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) 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 - ''
hasSubOptions this adds the possibility of nested options (thus a second list nested within the first one),
if this is set true 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)
boolean - false
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

# Events

Event name Properties Description
update:selected-option undefined Object - the selected option inform parent if option was selected by mouse click
(the .sync modifier 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)

Last Updated: 3/27/2023, 4:42:24 PM