
BY Ajay Singh
Popup Action button
Hello everyone,
In this article, I will explain how to implement a PopupActionButton in WebAtoms with examples.
What you will learn?
- You will learn how to implement the PopupActionButton on any of the pages.
- How to display the menu item.
- What action can be done using this component?
Why use it?
- Generally, PopupActionButton is used in
actionRenderer
(a bindable property of the base page) to display some quick menu options. - On the basis of user selection, you can perform some actions or navigate to other pages.
How to write code?
<PopupActionButton
icon="fa-solid fa-ellipsis-vertical">
<div
style-width="80px"
data-click-event="none"
data-click-animate="no">
<MenuItem
label="Add"
icon="fa-solid fa-add"
eventClick={() =>
this.viewModel.openNewPage(AddNewTraining,
"Add New Training")} />
<MenuItem
label="Modify"
icon="fa-solid fa-edit"
eventClick={() =>
this.modifyTraining(this.selectedTrainings)} />
<MenuItem
label="Delete"
icon="fa-solid fa-trash-can"
eventClick={() => this.deleteTraining()} />
</div>
</PopupActionButton>;
MenuItem is a function that takes some parameters like label, icon, event-click, href, target, etc.
Code explanations
- We can set the label property to display the name of that menu.
- We can set the icon to the menu. In the above example, we have added the icon using the font awesome.
- We can set the event click also to perform some action. In the above example, we have called one function on click to the menu item to delete the training object.
- We can redirect to other pages using the href property to the menuItem.
BY Ajay Singh
![]() | ![]() | ![]() | ![]() |
Like | Comment | Save | Share |
ARCHIVES
2022
2021
2020
2019