How to build a FAB Menu in MockingBot
An ongoing series of MockingBot tutorials
FAB stands for “Floating Action Button”. It is generally used as a switch of advanced operations. It is usually a floating small circle around some corner. A FAB has its own unique dynamic effects, such as deformation, popup, shifting, etc., it contains some specific operation that user can perform on the current page.
FAB looks like below: Click the “Plus” button to pop up more available functions for the current page.
How to build this FAB in MockingBot?
1. Edit global states, build the “Plus” button
Drop a “Plus” icon component to the work area. Set the border radius to 45, icon size to 24, background color to #ff5722, foreground color to white.
2. Build other 3 buttons
For “Collection”, “Edit”, and “Return” buttons, set the border radius to 40, icon size to 19, background color to #ff5722, foreground color to white.
3. Edit state 1
Place the four buttons as we did in the picture. Rotate the three sub buttons with some degrees, set to “hidden” on the Inspector Panel.
4. Add state 2
Rotate the “Plus” icon by 360 °; move the orange icon position. The final results are shown as below:
5. Connect state 1 and state 2.
If you have any question, please leave your comment.
And please 👏 for us if you find this useful. We will bring more tutorials to you.
Visit MockingBot and every new user gets a 2-week free trial of our Collaboration Plan.
