@appstractdk/as-dropdown

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: if true, dropdown will remain open upon selection of an option and will be closed if clicked outside the dropdown.
• dynamicContent: this should be set to true if content is inserted automatically and there is no dropdown content defined in the HTML.
• showOnHover: if true, dropdown will be expanded and closed upon hover event.
• content: this is where the content of the dropdown should be defined if dynamicContent is set to true.