Dropdown extends Floater

Assign a floater panel to a MouseEvent

Example

JS
new Dropdown({
    content: createElement({
        class: 'bg-white pad',
        content: 'Hello World'
    }),
    anchor: '#hi-button'
})
HTML
<komp-dropdown anchor="#hi-button">
    Hello World
</komp-dropdown>

Constructor

new Dropdown(options)
options : Object optional
mouseevent : string optional

MouseEvent that toggles floater

removeOnBlur : boolean optional

Hide dropdown when user clicks outside or focuses elsewhere

timeout : number optional

Milliseconds to wait before hiding dropdown after mouseleave

anchor : HTMLElement

element to anchor positioning to

container : string | HTMLElement optional

element to append floater to. If String, then used as selector for this.closest(selector)

placement : string optional

how the floater is anchored, e.g. "top", "top-start", "top-end", "left", "left-start"...

strategy : string optional

how the floater is positioned in the document. "absolute" or "fixed"

flip : boolean | Object optional

See https://floating-ui.com/docs/flip, defaults to false in favor of autoPlacement

offset : boolean | Object optional

See https://floating-ui.com/docs/offset

shift : boolean | Object optional

See https://floating-ui.com/docs/shift

arrow : boolean | number optional

True to show default size, or number in pixels

size : boolean | Object optional

See https://floating-ui.com/docs/size

autoPlacement : boolean | Object optional

See https://floating-ui.com/docs/autoPlacement

inline : boolean | Object optional

See https://floating-ui.com/docs/inline

autoUpdate : boolean | Object optional

See https://floating-ui.com/docs/autoUpdate#options

onShow : function optional

event listener for show (cancellable, fires before showing)

onShown : function optional

event listener for shown (fires after showing)

onHide : function optional

event listener for hide (cancellable, fires before hiding)

onHidden : function optional

event listener for hidden (fires after hiding)

scope : string optional

showing a floater will hide all other floaters of same scope

content : string | HTMLElement | Array | Object optional

content to append to element. Passed to Dolla's content

Instance Methods

F   hide() → Dropdown

Hide the dropdown and remove -active class from the anchor

Returns

Dropdown

this

F   show() → Dropdown

Show the dropdown and add -active class to the anchor

Returns

Dropdown

this

F   toggle(shouldHide) → Floater

Toggle the floater visibility

Parameters

shouldHide : boolean optional

explicitly show or hide. If omitted, toggles based on current visibility.

Returns

Floater

this

Events

E   hidden

Fired after the floater is hidden

E   hide

Fired before the floater is hidden (cancellable)

E   show

Fired before the floater is shown (cancellable)

E   shown

Fired after the floater is shown