Below is the sample button menu example to get the selected button menu value.
Example:
<template>
<lightning-card title="Button Menu Example">
<div class="slds-p-around_medium lgc-bg">
<lightning-button-menu alternative-text="Show menu" icon-name="utility:settings" onselect={handleMenuItem}>
<lightning-menu-item label="New" icon-name="utility:new" value="New"></lightning-menu-item>
<lightning-menu-item label="Edit" icon-name="utility:edit" value="Edit"></lightning-menu-item>
<lightning-menu-item label="Delete" icon-name="utility:delete" value="Delete"></lightning-menu-item>
</lightning-button-menu>
</div>
</lightning-card>
</template>
JS Code:
import { LightningElement } from "lwc";
export default class App extends LightningElement {
handleMenuItem(event) {
console.log("selected menu => " + event.detail.value);
switch (event.detail.value) {
case "New":
// do logic
break;
case "Edit":
//do logic
break;
case "Delete":
//do logic
break;
}
}
}
Output:
I want to pass a record Id to the menu for edit and delete operation, how to implement the same?
ReplyDelete