The Floating action button is a circular button defined in the Material Design specification. They are often used to promote the primary action of the app. It can be displayed either as an inline element or in one of the corners. Normally it will be positioned in the lower right corner of the screen.
The Floating action button is a UI component introduced in Material Design. It is used to represent the primary action of an app.
In Onsen UI the Floating action button can be displayed using the <ons-fab> element.
<ons-fab>
<ons-icon
icon="md-plus">
</ons-icon>
</ons-fab>
By default the component is displayed as an inline element. By using the position attribute it can be placed in one of the corners. The most common value is bottom right since that’s where it’s usually positioned in Android native apps.
<ons-fab position="bottom right">
...
</ons-fab>
By default the <ons-fab> will be rendered in both iOS and Android. However, in most cases it should not be displayed in iOS but instead the same action should be tied to some other UI component.
To only display it in Android, the <ons-if> element can be used.
<ons-if platform="android">
<ons-fab>
...
</ons-fab>
</ons-if>
You can try adding the <ons-if> element in the code and switch between iOS and Android.
Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-fab someAttribute="true" anotherAttribute><ons-fab>
JS: document.querySelector('ons-fab').setAttribute('someAttribute', 'true')
| Name | Type | Description |
|---|---|---|
| modifier | String | The appearance of the button. Optional. |
| ripple | If this attribute is defined, the button will have a ripple effect when tapped. Optional. | |
| position | String |
The position of the button. Should be a string like "bottom right" or "top left". If this attribute is not defined it will be displayed as an inline element.
Optional.
|
| disabled | Specify if button should be disabled. Optional. |
Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-fab').ripple.
| Name | Description |
|---|---|
| ripple | If this property is defined, the button will have a ripple effect when tapped. |
| disabled | Whether the element is disabled or not. |
| visible | Whether the element is visible or not. |
Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-fab modifier="mini
modifier2"><ons-fab>.
| Name | Description |
|---|---|
| mini |
Makes the ons-fab smaller.
|
These methods are called directly on the DOM element. Get a reference to the element in JS, and the methods below will be available to call on it. For example: document.querySelector('ons-fab').someMethod().
| Signature | Description |
|---|---|
| show() | Show the floating action button. |
| hide() | Hide the floating action button. |
| toggle() | Toggle the visibility of the button. |
Show the floating action button.
Hide the floating action button.
Toggle the visibility of the button.
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.