Floating action buttons.
As the name implies,
they are floating, they are call for action,
and they are buttons.
So, how exactly do we make use of floating action buttons in our application?
How do we configure them in our Ionic application?
And what are they useful for?
Let's look at more details about floating action buttons in this lecture.
So, as I mentioned,
floating action buttons are a Material Design component.
They have been introduced as part of the Material Design.
And so, you will see a lot of Android applications
making use of floating action buttons in their views.
Now, this component is also available within Ionic,
so should you decide to use a floating action button within your Ionic application,
you can definitely do so,
as we will do in the next two exercises of this course.
So, the idea behind having a floating action button in a view is
that this button is a call to action or call to the promoted action within that view.
So, for example, if you have a list of items and you want to add one more,
so your floating action button could be used as an add action within that view.
Similarly, we can configure our floating action button to provide
the default action that you want to take within that view,
as we will see in the exercises that follow this lecture.
So how do we design a floating action button?
As the name implies, the floating action button is floating on top of the view
or on top of the page that you use within your Ionic application.
Now the floating action button can be fixed at a location,
so you can specify where you fix the floating action button in the view.
Typically, the floating action button is fixed to
the right bottom corner in our view so that it doesn't obstruct the rest of the view.
Sometimes, in some of the views,
especially in Material Design,
you will see that the floating action button may be stuck to a picture at the top,
and between the picture and the text,
there will be a floating action button.
In that case, the fab will scroll with the view.
So you can use the floating action button in Ionic
to either be at a fixed location or scroll with the view.
If you want it to be at a fixed location,
then you will enclose this within a ion-fab,
so this is a container for your floating action button.
So, and if you are designing a button as a floating action button,
you will use the standard HTML button and then use
the ion-fab attribute associated with that button.
Let's take a look at an example of a floating action button.
Going to our application,
you will see that in the home page I have
a floating action button that will be included as part of the next exercise.
Now, what is the purpose of this floating action button?
We will learn more about it in the next exercise.
And also, you will see that we will introduce another following action button
within our view of a specific dish.
So you can see on the right corner you see a floating action button there.
The purpose of this button is to add this dish to the list of your favorite dishes
or to be able to display that this dish
is already selected as one of the favorite dishes of the user.
So these are two examples of
floating action buttons being used within your Ionic application.
You can also configure your floating action button in Ionic
to display multiple floating action buttons when the fab,
the main fab is clicked.
This is where we'll use the Ionic fab-list to include a set of
additional floating action buttons which will be
displayed when you click on the main floating action button.
Let's take a look at an example now.
Going to our Ionic application,
when you click on this floating action button,
you will immediately see that there is a set of additional floating action buttons
that will be displayed onto the screen here and you'll
see that the main fab has now turned into a cross.
And when you click on that,
those lists of additional fabs will be hidden.
So, this is the approach that we will take,
with an ion-list here,
so both in Android and in iOS,
the use of the floating action button to display multiple fabs onto the screen.
With this, we will move onto the exercises where we will see how
these two floating action buttons will be added to our Ionic application.
Jogesh K. MuppalaAssociate Professor
