Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Position an Ionic 4 Floating Action Button (FAB) Component in an App

    Chris GriffithChris Griffith
    ionicIonic

    Learn how to create and use the Ionic Floating Action Button (FAB) in your Ionic 4 application.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    Discuss

    Discuss