Dropdown
Dropdown element is used to display the context menu after clicking the button. Allows the user to select one of the predefined options. It contains a Button element that acts as an activator and a Menu element with content in the form of individual MenuItem. items.
Basic usage
Dropdown with dialogue
Display on hover
Dropdown with tooltip
Dropdown with avatar
Attributes and Properties
placement
Description | Sets the location of the drop-down menu. The options are "start", "end", "top", "bottom". |
Attribute | placement |
Type | string |
Default | "start" |
offset
Description | Specifies the distance of the context menu from the button. |
Attribute | offset |
Type | number |
Default | 0 |
trigger
Description | Specifies how the dropdown is activated. The values can be "click" or "hover". |
Attribute | trigger |
Type | string |
Default | "click" |
tooltip
Description | Text that appears as a tooltip when hovered over an element. |
Attribute | tooltip |
Type | string |
Default | undefined |
collapsible
Description | If true , the dropdown will automatically close when the menu item is clicked. |
Attribute | collapsible |
Type | boolean |
Default | false |
Events
Name | Description |
---|---|
wje-dropdown:open | It is emitted when the dropdown menu is opened. |
wje-dropdown:close | It is emitted when the dropdown menu is closed. |
Methods
BeforeShow
Description | Method executed before the dropdown menu is displayed. |
Signature | () => Promise<any> |
AfterShow
Description | Method executed after the dropdown menu is displayed. |
Signature | () => Promise<void> |
beforeClose
Description | Method executed before closing the dropdown menu. |
Signature | () => Promise<void> |
afterClose
Description | Method executed after closing the dropdown menu. |
Signature | () => Promise<void> |
CSS Shadow Parts
Name | Description |
---|---|
native | Refers to the div element inside the dropdown |
CSS Custom Properties
Name | Description |
---|---|
--wj-dropdown-background | Dropdown menu background colour |
--wj-dropdown-border-radius | Rounding the edges of the dropdown menu |
--wj-dropdown-border-width | Dropdown menu border width |
--wj-dropdown-border-color | Dropdown menu border colour |
--wj-dropdown-box-shadow | Shadow dropdown menu |
--wj-dropdown-width | Dropdown menu width |
--wj-dropdown-min-width | Minimum dropdown menu width |
--wj-dropdown-max-width | Maximum dropdown menu width |
Slots
Name | Description |
---|---|
trigger | An element that serves as a trigger for displaying the dropdown menu. |
`` | The contents of the dropdown menu. |