Sunday, 26 March 2017

How to implement FAB (Floating Action Buttons) in ionic 2

FAB Button (Floating Action Buttons) are buttons that float over the content in a fixed position. generally fab's are used for actions like sharing to other media's etc.

In this post i'm going to implement a fab button list containing social media. I'going  to set the button position at the bottom right corner, so that when the fab button is clicked the fab list will be displayed with an animation on top of the fab button.

Copy and Paste the following code on to your page on which you are likely to show fab button.

<ion-fab right bottom color="fabcustom">
<button ion-fab ><ion-icon name="arrow-dropup-circle"></ion-icon></button>
<ion-fab-list side="top">
<button ion-fab color="fabmini"><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-twitch"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-googleplus"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-tumblr"></ion-icon></button>

As i had said earlier, the above code will be displayed as shown below. fab will be positioned at the bottom right and the list will be displayed on top.


Styling the FAB's

Now that, we have fab working, i would like to change the color of the fab button's as i'm not a fan of ionic's primary color, and also i would like to decrease the size of fab button.
To change the color of the fab button, let's change the variables.scss file a bit.

Change the colors variable as shown below

$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
fabcustom: #38dbf5,
fabmini: #35acbf

as you can see two custom properties are added to colors variable.we will use them to change fab color.

Add newly added properites to fab button's, modified code shown below.

<ion-fab right bottom color="primary">
<button ion-fab ><ion-icon name="arrow-dropup-circle"></ion-icon></button>
<ion-fab-list side="top">
<button ion-fab ><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-twitch"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-googleplus"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-tumblr"></ion-icon></button>

Now that we have changed the color of the fab buttons, lets change the size of the fab & fab mini button's, for this also we will modify variables.scss

$fab-size : 46px !default
$fab-mini-size : 36px !default;

that's it for the styling.leave a comment for any queries.


Post a comment