ūüĒė

How to Use a FAB

A FAB, or a Floating Action Button, is useful in highlighting an action a user should take on a screen of scrollable content.

To create the ‚Äėfloating‚Äô effect on your screen, make sure that the¬†Scrollable¬†switch is disabled under the screen‚Äôs configuration options.

image

On the screen, put all of your content inside of a Scroll View component. Place a Button or FAB component outside of the Scroll View directly under it.

image

While the Button or FAB is selected, change the Selected Item > Align property in the Styles tab to Center. Next, scroll down to the Position section and switch its Position Type from relative to absolute. While still in the Position section, change the positioning at the bottom of the Button to keep it from touching the bottom of the screen (if you don’t have a set number in mind 16 is good!)

Once finished, the FAB should appear on your screen as shown below:

image