Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

FabContainer

ion-fab

Improve this doc

<ion-fab> is not a FAB button by itself but a container that assist the fab button (<button ion-fab>) allowing it to be placed in fixed position that does not scroll with the content. It is also used to implement "material design speed dial", ie. a FAB buttons displays a small lists of related actions when clicked.

Usage

<!-- this fab is placed at top right -->
<ion-content>
 <ion-fab top right>
   <button ion-fab>Button</button>
 </ion-fab>

 <!-- this fab is placed at the center of the content viewport -->
 <ion-fab center middle>
   <button ion-fab>Button</button>
 </ion-fab>
</ion-content>

Ionic's FAB also supports "material design's fab speed dial". It is a normal fab button that shows a list of related actions when clicked.

The same ion-fab container can contain several ion-fab-list with different side values: top, bottom, left and right. For example, if you want to have a list of button that are on the top of the main button, you should use side="top" and so on. By default, if side is ommited, side="bottom".

<ion-content>
 <!-- this fab is placed at bottom right -->
 <ion-fab bottom right >
   <button ion-fab>Share</button>
   <ion-fab-list side="top">
     <button ion-fab>Facebook</button>
     <button ion-fab>Twitter</button>
     <button ion-fab>Youtube</button>
   </ion-fab-list>
   <ion-fab-list side="left">
     <button ion-fab>Vimeo</button>
   </ion-fab-list>
 </ion-fab>
</ion-content>

A FAB speed dial can also be closed programatically.

<ion-content>
 <ion-fab bottom right #fab>
   <button ion-fab>Share</button>
   <ion-fab-list side="top">
     <button ion-fab (click)="share('facebook', fab)">Facebook</button>
     <button ion-fab (click)="share('twitter', fab)">Twitter</button>
   </ion-fab-list>
 </ion-fab>
</ion-content>
share(socialNet: string, fab: FabContainer) {
  fab.close();
  console.log("Sharing in", socialNet);
}

Attributes

Attribute Description
top Places the container on the top of the content
bottom Places the container on the bottom of the content
left Places the container on the left
right Places the container on the right
middle Places the container on the middle vertically
center Places the container on the center horizontally
edge Used to place the container between the content and the header/footer

Instance Members

close()

Close an active FAB list container

Sass Variables

Property Default Description
$fab-size 56px

Width and height of the FAB button

$fab-mini-size 40px

Width and height of the FAB button mini

$fab-content-margin 10px

Margin of the FAB Container

$fab-list-margin 10px

Margin of the FAB List

$fab-list-button-background-color #f4f4f4

Background color of the button in a list

Property Default Description
$fab-ios-background-color color($colors-ios, primary)

Background color of the button

$fab-ios-text-color color-contrast($colors-ios, $fab-ios-background-color)

Text color of the button

$fab-ios-background-color-activated color-shade($fab-ios-background-color)

Background color of the activated button

$fab-ios-list-button-background-color $fab-list-button-background-color

Background color of the button in a list

$fab-ios-list-button-text-color color-contrast($colors-ios, $fab-ios-list-button-background-color)

Text color of the button in a list

$fab-ios-list-button-background-color-activated color-shade($fab-ios-list-button-background-color)

Background color of the activated button in a list

$fab-ios-list-button-transition-duration 200ms

Transition duration of the transform and opacity of the button in a list

$fab-ios-list-button-transition-timing-function ease

Speed curve of the transition of the transform and opacity of the button in a list

$fab-ios-list-button-transition-delay 10ms

Transition delay of the transform and opacity of the button in a list

Property Default Description
$fab-md-box-shadow 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1)

Box shadow of the FAB button

$fab-md-box-shadow-activated 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1)

Box shadow of the activated FAB button

$fab-md-background-color color($colors-md, primary)

Background color of the button

$fab-md-text-color color-contrast($colors-md, $fab-md-background-color)

Text color of the button

$fab-md-background-color-activated color-shade($fab-md-background-color)

Background color of the activated button

$fab-md-list-button-background-color $fab-list-button-background-color

Background color of the button in a list

$fab-md-list-button-text-color color-contrast($colors-md, $fab-md-list-button-background-color)

Text color of the button in a list

$fab-md-list-button-background-color-activated color-shade($fab-md-list-button-background-color)

Background color of the activated button in a list

$fab-md-list-button-transition-duration 200ms

Transition duration of the transform and opacity of the button in a list

$fab-md-list-button-transition-timing-function ease

Speed curve of the transition of the transform and opacity of the button in a list

$fab-md-list-button-transition-delay 10ms

Transition delay of the transform and opacity of the button in a list

Property Default Description
$fab-wp-background-color color($colors-wp, primary)

Background color of the button

$fab-wp-text-color color-contrast($colors-wp, $fab-wp-background-color)

Text color of the button

$fab-wp-background-color-activated color-shade($fab-wp-background-color)

Background color of the activated button

$fab-wp-list-button-background-color $fab-list-button-background-color

Background color of the button in a list

$fab-wp-list-button-text-color color-contrast($colors-wp, $fab-wp-list-button-background-color)

Text color of the button in a list

$fab-wp-list-button-background-color-activated color-shade($fab-wp-list-button-background-color)

Background color of the activated button in a list

$fab-wp-list-button-transition-duration 200ms

Transition duration of the transform and opacity of the button in a list

$fab-wp-list-button-transition-timing-function ease

Speed curve of the transition of the transform and opacity of the button in a list

$fab-wp-list-button-transition-delay 10ms

Transition delay of the transform and opacity of the button in a list

Related

FAB Component Docs

API

Native

General