BY Ajay Singh25 Dec 2022 Edit
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
LikeCommentSave
LikeCommentSaveShare
0
Categories
General
YantraJS
Developer Guides
Tutorials
Web Atoms Updates

POPULAR POSTS
17 Mar 2021
LATEST ACTIVITY
Shubham Khare
liked this post.
Simmi Kava
liked this post.
Show more
ARCHIVES
2022
2021
2020
2019
TAGS
javascript (56)
developer (25)
javascriptdeveloper (16)
Xamarin.Forms (16)
Html (14)
webatoms (12)
typescript (11)
xamarin (11)
coding (10)
arrays (9)
web-atoms (9)
android (8)
javascript-developer (8)
csharp (7)
dotnet (7)
css (6)
update (6)
dotnet-standard (5)
function (5)
iOS (5)
methods (4)




Web Atoms: JSX (TSX + TypeScript) for Xamarin.Forms, Hot Reload Your App in Production Environment

PlaygroundSamples Repository