Building a floating action button component
One of the most recognizable features in a mobile design user interface is the Floating Action Button (FAB). They represent the primary action of the active screen. Almost every user will know their purpose because they have seen them in all major applications, such as Microsoft Outlook:
Figure 6.8: Write new email FAB in Microsoft Outlook
We will learn how to replicate this element using components in this recipe.
How to do it...
- Go to the Power Apps maker portal and create a solution.
- Inside the solution, create an app by clicking New | App | Canvas app. Name it, select the Phone layout, and click Create.
- From the Tree view, go to the Components tab and click on New component. From the right pane, name it
FABCmp
. Set its Width and Height to95
and its Fill color to transparent:Color.Transparent
- Go to the Insert toolbar, search for the Add icon, and click on it to add it. Set its X and Y properties...