<template>
<w-stack align-items="center" gap="large" justify-content="center">
<w-dropdown class="dropdown-sizes" size="small">
<w-button label="Small" trailing-icon="unfold" />
</w-dropdown>
<w-dropdown class="dropdown-sizes">
<w-button label="Medium" trailing-icon="unfold" />
</w-dropdown>
<w-dropdown class="dropdown-sizes" size="large">
<w-button label="Large" trailing-icon="unfold" />
</w-dropdown>
</w-stack>
</template>
<script type="module">
const dropdownItemsList = [{ title: 'Edit' }, { title: 'Delete' }];
function onItemClick({ detail: item }) {
console.log(`Item clicked: ${item[0]}`);
}
const dropdownSizes = document.querySelectorAll('w-dropdown.dropdown-sizes');
dropdownSizes.forEach(dropdown => {
dropdown.items = dropdownItemsList;
dropdown.addEventListener('item-click', e => {
onItemClick(e);
});
});
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
open |
Controls whether the dropdown is open or not. |
boolean |
false |
false, true |
|
position |
Controls the position of the dropdown menu in relation to the trigger. `bottom-left` will align it to the bottom left of the trigger. `bottom-right` will align it to the bottom right of the trigger. `top-left`and 'top-right' will align it to the top left and right respectively. |
string |
bottom-left |
bottom-left, bottom-right, top-left, top-right |
|
size |
Controls the size of the dropdown popout. |
string |
medium |
small, medium, large |
|
items |
Controls the number of dropdown items and dropdown groups to display. |
array |
|
[{ heading: string, items: array [ { title: string, leadingVisual: string, trailingVisual: string, href: string, to: string, value } ], hideDivider: boolean }] |
|
target |
Type string or an actual DOM node where you want render component |
string|object |
body |
|
|
use-teleport |
When it is set to true, dropdown menu will teleport the content part into the body. |
boolean |
false |
false, true |
Slots
|
Name |
Description |
|---|---|
|
default |
Default content slot. Use it for adding the dropdown toggle. |
Events
|
Name |
Description |
Type |
|---|---|---|
|
open |
This event is emitted when the dropdown is open. |
{ "names": [ "Boolean" ] } |
|
close |
This event is emitted when the dropdown is closed. |
{ "names": [ "Boolean" ] } |
|
item-click |
This event is emitted when a dropdown item is clicked. |
{ "names": [ "String, any" ] } |
|
select |
This event is emitted when a dropdown item is checked or unchecked. |
{ "names": [ "Array" ] } |