@appstractdk/as-dropdown
v1.0.37
Published
A dropdown component.
Downloads
24
Keywords
Readme
as-dropdown
A dropdown component.
Usage
For a dropdown with select
option use the following HTML:
<div class="dropdown">
<span class="dropdown-text">Select something from me</span>
<select class="dropdown-select">
<option value="0">Value 0</option>
<option value="1">Value 1</option>
</select>
<ul class="dropdown-entries">
<li class="dropdown-entry" data-value="0">Value 0</li>
<li class="dropdown-entry" data-value="1">Value 1</li>
</ul>
</div>
For a dropdown with a dynamic content (that could be passed as a string with HTML content or as a Node object) use the following HTML:
<div class="dropdown">
<span class="dropdown-text">Select something from me</span>
<div class="dropdown-entries"></div>
</div>
Options
as-dropdown has the following options:
const defaultOptions = {
textSelector: '.dropdown-text',
containerSelector: '.dropdown-entries',
selectSelector: '.dropdown-select',
onDropdownSelect: null,
onDropdownShow: null,
onDropdownHide: null,
noAutoHide: false,
dynamicContent: false,
showOnHover:true,
content:null
};
textSelector
references dropdown header.containerSelector
references the element that contains data displayed when dropdown is active.selectSelector
references the<select>
element in the HTML.onDropdownSelect
references a callback function upon option select event.onDropdownShow
references a callback function upon dropdown is expanded.onDropdownHide
references a callback function upon dropdown is closed.noAutoHide
: iftrue
, dropdown will remain open upon selection of an option and will be closed if clicked outside the dropdown.dynamicContent
: this should be set totrue
if content is inserted automatically and there is no dropdown content defined in the HTML.showOnHover
: iftrue
, dropdown will be expanded and closed uponhover
event.content
: this is where the content of the dropdown should be defined ifdynamicContent
is set totrue
.