/ui/elements/dropdown
The dropdown elements module exports the dropdown method to create a dropdown element group from a params argument.
- Source
Requires
Methods
(inner) dropdown(params) → {HTMLElement}
The dropdown method returns a dropdown element created from the params argument.
| Name | Type | Description |
|---|---|---|
params | Object | Parameter for the creation of the dropdown element. |
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
params.placeholder | string | <optional> | '' | The placeholder for the list of options. |
params.span | string | <optional> | Alternative property for the placeholder. | |
params.multi | boolean | <optional> | Allow multiple choice if true. | |
params.keepPlaceholder | boolean | <optional> | set this flag to | |
params.pills | boolean | <optional> | Applies pills component to show selected values.Available for mutliple choice. | |
params.entries | Object | <optional> | Array of option elements. Expected format: [{title: 'Title for Option 1', option: 'option1'}, ...]. Add property | |
params.headerOnClick | function | <optional> | Callback to execute when a header is clicked. Overrides default function. |
- Source
HTML dropdown element
- Type:
- HTMLElement
(inner) headerOnClick(e)
The headerOnClick method handles the click event for the dropdown header.
The active class will be toggled on the dropdown element.
The active class of all other dropdown in the document will be removed if event target is toggled to active.
The size and position of the dropdown and it's ul child element will be determined from the document body viewport as well the dropdown elements.
| Name | Type | Description |
|---|---|---|
e | Event | Click event |
- Source
(inner) liOnClick(e, entry)
The default on click event methods for li elements in a dropdown list.
| Name | Type | Description |
|---|---|---|
e | event | Click event. |
entry | Object | Object associated with li element. |
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
e.target | HTMLElement | The li element. | ||
entry.title | string | <optional> | entry.option | Text shown in li element. |
entry.option | string | Value associated with li element. |
- Source
(inner) ulElement(params) → {HTMLElement}
Create a
- element with nested
- elements for a dropdown.
| Name | Type | Description |
|---|---|---|
params | Object | Parameter for the creation of the dropdown element. |
| Name | Type | Attributes | Description |
|---|---|---|---|
params.liOnClick | function | <optional> | Callback to execute when an element in the list is clicked. Overrrides default function. |
- Source
- element for dropdown.
- Type:
- HTMLElement