NativeScript-FloatingActionButton

NativeScript plugin for Material Design Floating Action Button UI component.

Installation

tns plugin add @nstudio/nativescript-floatingactionbutton

Screenshot

---

Multiple FAB/Swipe Animation Support

Usage

The icon for the FAB can be a local image in your app or an image/icon from the App_Resources.

Plain NativeScript

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
      xmlns:FAB="@nstudio/nativescript-floatingactionbutton">
    <ActionBar title="Native FAB" />
    <grid-layout rows="auto, *">
        <list-view row="1" items="{{ users }}">
            <list-view.itemTemplate>
                <label text="{{ name }}" />
            </list-view.itemTemplate>
        </list-view>
            <FAB:fab tap="fabTap"
                     row="1"
                     icon="'~/images/ic_add_white.png'"
                     rippleColor="#f1f1f1"
                     class="fab-button" />
    </grid-layout>
</Page>

---

NativeScript Angular

import { registerElement } from 'nativescript-angular/element-registry';
registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

HTML

<StackLayout>
    <FAB (tap)="fabTap()" icon="'~/images/ic_add_white.png'" rippleColor="#f1f1f1" class="fab-button"></FAB>
</StackLayout>

---

NativeScript Vue

import Vue from 'nativescript-vue';

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

Template

<template>
  <page>
    <grid-layout rows="auto, *">
      <list-view row="1" items="{{ users }}">
        <list-view.itemTemplate>
          <label text="{{ name }}" textWrap="true" />
        </list-view.itemTemplate>
      </list-view>
      <fab
        @tap="fabTap"
        row="1"
        icon="res://ic_add_white"
        rippleColor="#f1f1f1"
        class="fab-button"
      ></fab>
    </grid-layout>
  </page>
</template>

---

CSS

Recommended CSS styles.

.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;
}

---

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

iOS Notes

• We're using MNFloatingActionButton by Matt Nydam
• Width\Height are requried properties
• icon is a required property, if left as empty string default will be shown

Changelog

Contributors

Brad Martin	Steve McNiven-Scott	Nathanael Anderson	Gabriel Marinho

Alexander Vakrilov	Lázaro Danillo Menezes	Jofferson Ramirez Tiquez	Ravi

Samuel Ikechukwu	Stanimira Vlaeva