ion-fab-button
Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an <ion-fab-button>FAB</ion-fab-button>. They need to be wrapped with an <ion-fab> component in order to be fixed over the content:
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab-button>Button</ion-fab-button>
</ion-fab>
<!-- Default Floating Action Button that scrolls with the content.-->
<ion-fab-button>Button</ion-fab-button>
</ion-content>
If the FAB button is not wrapped with <ion-fab>, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:
<ion-content>
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>
Properties
activated
boolean
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information, see Theming your App.
disabled
boolean
If true, the user cannot interact with the fab button. Defaults to false.
href
string
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
show
boolean
toggleActive
translucent
boolean
If true, the fab button will be translucent. Defaults to false.
Attributes
activated
boolean
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information, see Theming your App.
disabled
boolean
If true, the user cannot interact with the fab button. Defaults to false.
href
string
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
show
boolean
toggle-active
translucent
boolean
If true, the fab button will be translucent. Defaults to false.
Built with StencilJS