Dropdown plugin
Frontfire UI provides a dropdown panel that is placed near an originating element and overlays the page.
This plugin is available in the Minimal and Complete bundles.
Description
A dropdown is an element that is opened upon user interaction with a specific element.
It is placed near that element (at either side) and overlays the surrounding content on the page so that it does not move anything around.
The dropdown content can be freely defined in an HTML element with the dropdown CSS class which applies basic dropdown styles and makes the element invisible at first.
The background colour can be set with the --dropdown-background CSS variable.
The additional bordered class adds a border around the dropdown element to better separate it from the background.
The border colour can be set with the --dropdown-border-color CSS variable.
To open a dropdown element, call the dropdown() plugin function on the element to show as dropdown.
The function takes the options (including target placement element) as argument.
The options must at least set a target element and can alternatively be specified as data-opt HTML attributes with the dropdown HTML element.
Example
Dropdown title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non vestibulum odio, nec rhoncus metus. Suspendisse consectetur erat id dui ultricies vulputate. Ut commodo sem eget dapibus malesuada. Praesent ligula ligula, egestas sit amet arcu interdum, pharetra dapibus nibh. Sed posuere dapibus nulla.
Result: Not yet opened
Placement and arrow
The dropdown can be placed at all sides of the target element. The placement option value is a combination of the main direction (the edge to place the dropdown at) and anchor side (the side of the target element that the dropdown will be aligned to). All possible values are shown in the example below.
Anchoring the dropdown on the left side means it will be left-aligned with the target element and possibly extend over its right end if the dropdown is wider than the target element. This leads to the strange-looking naming that a “left-anchored” dropdown appears to reach out to the right side. If, however, the dropdown is smaller than the target element, it will still sit at its left side.
The arrow option adds a triangle arrowhead between the dropdown and the target element to indicate what the dropdown relates to.
This moves the dropdown element further away from the target element by the arrow’s height.
The arrow can be seen best with the bordered class or a contrasting background colour.
Both can be customised in this comprehensive example.
Options
Options
The following options are available:
| Name | Type | Description | Default |
|---|---|---|---|
arrow |
Boolean | Indicates whether an arrow at the dropdown outline points to the target element. | false |
arrowHeight |
Number | The height of the arrow away from the dropdown edge, in pixels. | 10 |
arrowWidth |
Number | The width of the arrow along the dropdown edge, in pixels. | 16 |
autoClose |
Boolean | Indicates whether the dropdown is closed when clicking anywhere outside of it. | true |
closeOnHide |
Boolean | Indicates whether the dropdown is closed when the document is hidden. | true |
closeOnResize |
Boolean | Indicates whether the dropdown is closed when the window is resized. | true |
cssClass |
String, Iterable | Additional CSS classes to add to the dropdown container. | None |
fixed |
Boolean | Indicates whether the dropdown has fixed position instead of absolute. | false |
maxHeight |
Number | The maximum height of the dropdown, in pixels. If the value is 0, there is no limit. | 0 |
minWidth |
Number | The minimum width of the dropdown, in pixels. | 0 |
offsetBottom |
Number | The placement offset at the bottom edge of the target element, in pixels. | 0 |
offsetLeft |
Number | The placement offset at the left edge of the target element, in pixels. | 0 |
offsetRight |
Number | The placement offset at the right edge of the target element, in pixels. | 0 |
offsetTop |
Number | The placement offset at the top edge of the target element, in pixels. | 0 |
placement |
String | The placement of the dropdown relative to the target element. It is a combination of the primary (“top”, “bottom”, “left”, “right”) and secondary alignment (“top”, “bottom”, “left”, “right”, “center”), separated by a dash (-). The shortcut value “right” means “bottom-right”. |
"bottom-left" |
style |
Object | Additional CSS styles to add to the dropdown container. This can be any format supported by Frontfire.style. | None |
target |
Node, String | The target element to place the dropdown at, as Node or CSS selector. This setting is required. | None |
Plugin properties
This plugin provides properties to access the dropdown state.
isOpen
isOpen→ Boolean
Determines whether the dropdown is currently open. This property cannot be written.
Plugin methods
This plugin provides methods to control the open dropdown.
close
close()→ this
Closes the selected dropdown.
Plugin events
This plugin triggers events for the dropdown.
closing
Triggered when the dropdown is about to close.
This event can be cancelled by calling event.preventDefault() to keep the dropdown open.
close
Triggered when the dropdown is beginning to be closed.
closed
Triggered when the dropdown is fully closed and invisible.