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. |