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

FabList

ion-fab-list

Improve this doc

ion-fab-list is a container for multiple FAB buttons. They are components of ion-fab and allow you to specificy the buttons position, left, right, top, bottom.

Usage

<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>

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