Position an Ionic 4 Floating Action Button (FAB) Component in an App
Learn how to create and use the Ionic Floating Action Button (FAB) in your Ionic 4 application.
Instructor: [00:00] Floating Action Buttons or FABs are UI element that remains sticky on the screen. The new email button in Gmail is a great example of this component. I have a basic template. Let's scroll and look at some static data.
[00:14] Let's add a fab component. This component is actually built with two components. First is ion-fab. This is the container for our ion-fab button. It's on this component that we can define our positioning.
[00:28] Let's set the ion-fab to vertical to be at the bottom and the horizontal position to be at the end. We'll also need to include slot attribute inside its value to fix.
[00:41] Now, we can add the visual element of the [inaudible] , ion-fab button. This is the component we can set the color with button. Let's set it to primary. Typically, this element only displays an icon, so will include an ion icon component as well. I'll use the add icon. You don't have to use an icon. Text can be used as well.
[01:05] Since ionic service's already running, say, we won't recompile the app and reload it for us. There is our new tab poisoned at the bottom and right of our application. We can change the vertical to top or bottom or the horizontal position to start or end. There's another positioning option, that is, place the fab off the header or the footer.
[01:27] Only ion-fab, any edge director, save in a template. Now our fab is halfway between the header. In addition to a single button, Ion fab component supports displaying a list of ion-fab buttons. A common use case of this style would be displayed as set of social media options.
[01:49] Let's change our initial icon to share. This button state will now be shown when the user tabs on the fab. We can define an ion-fab list. This component will contain a list of ion-fab buttons that we want to display.
[02:06] I have some ion-fab buttons at my clipboard that I'll just paste in. Saving again, now when I tap on the fab, there's four ion-fab buttons animate down. If I tap the fab again, everything is removed. If you noticed, the ion-fab also change automatically to the closed icon.