# 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 forcombination 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 withbox-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 useand 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-backgroundin your app | boolean | - | false |
| useHighlightStringMatch | set true if option characters matching a string provided in highlightStringMatchshould be highlighted | boolean | - | false |
| highlightStringMatch | if useHighlightStringMatch is set to true, provide a string to match with theoption 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 (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)