FabButton
[ion-fab]
[ion-fab]FABs (Floating Action Buttons) are standard material design components. They are shaped as a circle that represents a promoted action. When pressed, it may contain more related actions.
FABs as its name suggests are floating over the content in a fixed position. This is not achieved exclusively with <button ion-fab>Button</button> but it has to wrapped with the <ion-fab> component, like this:
<ion-content>
<!-- Real floating action button, fixed. It will not scroll with the content -->
<ion-fab>
<button ion-fab>Button</button>
</ion-fab>
<!-- Button shaped as a circle that just like a normal button scrolls with the content -->
<button ion-fab>Button</button>
</ion-content>
In case the button is not wrapped with <ion-fab>, the fab button will behave like a normal button, scrolling with the content.
See [ion-fab] to learn more information about how to position the fab button.
Usage
<!-- Colors -->
<ion-fab>
<button ion-fab color="primary">Button</button>
</ion-fab>
<!-- Mini -->
<ion-fab>
<button ion-fab mini>Small</button>
</ion-fab>
Attributes
| Attribute | Description |
|---|---|
| mini | Makes a fab button with a reduced size. |
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 |