The icon for the FAB can be a local image in your app or an image/icon from the App_Resources.
### Plain NativeScript
```xml
```
---
### NativeScript Angular
```typescript
import { registerElement } from 'nativescript-angular/element-registry';
registerElement(
'Fab',
() => require('@nstudio/nativescript-floatingactionbutton').Fab
);
```
#### HTML
```HTML
```
---
### NativeScript Vue
```javascript
import Vue from 'nativescript-vue';
Vue.registerElement(
'Fab',
() => require('@nstudio/nativescript-floatingactionbutton').Fab
);
```
#### Template
```html
```
---
#### CSS
Recommended CSS styles.
```css
.fab-button {
height: 70;
width: 70; /// this is required on iOS - Android does not require width so you might need to adjust styles
margin: 15;
background-color: #ff4081;
horizontal-align: right;
vertical-align: bottom;
}
```
## Use Icon Fonts
First you need to setup icon fonts as described in [NativeScript documentation](https://docs.nativescript.org/ui/components/icon-fonts).
After this, you can use icon fonts on FAB by specifiying the unicode as text and add the `fas`/`far` class:
```
```
---
## API
| Property | Android | iOS | Description | Note |
| --------------------- | ------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| backgroundColor | X | X | Sets the background color of the button |
| icon | X | X | Supports the same image source options that NativeScript images support | Required on android |
| text | X | X | Allows to use text instead of image | Can be styled with `font-*` and `color` CSS properties |
| rippleColor | X | | Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices | None |
| hideOnSwipeOfView | X | X | Directs the fab to animate itself in and out on scroll | Pass it the name of the view to monitor for a scroll event example: hideOnSwipeOfView="userListView" |
| hideAnimationDuration | X | X | How many milliseconds it takes for the button to hide. | Default if not set: 300ms |
| swipeAnimation | X | X | slideDown, slideUp, slideLeft, slideRight, scale | Default is slideDown |
| androidScaleType | X | | center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix for more details see [Android-Docs](https://developer.android.com/reference/android/widget/ImageView.ScaleType) | Default is center |
## iOS Notes
- We're using [MNFloatingActionButton](http://cocoapods.org/pods/MNFloatingActionButton) by [Matt Nydam](https://github.com/mattnydam)
- Width\Height are requried properties
- icon is a required property, if left as empty string default will be shown
### Running Demo Apps
```bash
npm run demo.android
// or
npm run demo.ios
```
### [Changelog](./CHANGELOG.md)
### Contributors
| [ Brad Martin](https://github.com/bradmartin) | [ Steve McNiven-Scott](https://github.com/sitefinitysteve) | [ Nathanael Anderson](https://github.com/NathanaelA) | [ Gabriel Marinho](https://github.com/gabrielbiga) |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [ Alexander Vakrilov](https://github.com/vakrilov) | [ Lázaro Danillo Menezes](https://github.com/lazaromenezes) | [ Jofferson Ramirez Tiquez](https://github.com/jofftiquez) | [ Ravi](https://github.com/dlucidone) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| [ Samuel Ikechukwu](https://github.com/holymp2006) | [ Stanimira Vlaeva](https://github.com/sis0k0) | | |
| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
---
_Source: https://npm.io/package/@nstudio/nativescript-floatingactionbutton · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
