Material Design Floating Action Button in NativeScript apps.
Clone or download
Latest commit 9225c4a Aug 27, 2018
Permalink
Failed to load latest commit information.
demo fixes Aug 27, 2018
publish fixing build Oct 2, 2017
screens Update Demos\Readme Apr 14, 2016
src bump Aug 27, 2018
.gitignore Fix webpack uglify option. Oct 4, 2017
.prettierrc prettier/cleanup Aug 27, 2018
.travis.yml fix travis with seed Aug 27, 2018
LICENSE.md plugin updates Oct 2, 2017
README.md Update README.md Jan 7, 2018
tslint.json prettier/cleanup Aug 27, 2018

README.md

npm npm Build Status nStudio Plugin Twitter Follow

PayPal Donate

NativeScript-FloatingActionButton

XML widget to create the Material Design Floating Action Button for NativeScript apps.

Material Design Floating Action Button Spec

Installation

NativeScript 2.x

tns plugin add nativescript-floatingactionbutton@^2.2.7

NativeScript 3+

tns plugin add nativescript-floatingactionbutton

Configuration

No extra configuration is required for the FAB View component.

Screenshot


FAB Android Screenshot FAB iOS Screenshot

Multiple FAB/Swipe Animation Support

FAB Animations

Usage

XML

NOTE The sample XML here will position the FAB on top of the ListView. There is no need for absolute positioning due to using a GridLayout row/col settings.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
      xmlns:FAB="nativescript-floatingactionbutton">
    <Page.actionBar>
        <ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
    </Page.actionBar>
    <grid-layout rows="auto, *">
        <list-view row="1" items="{{ users }}">
            <list-view.itemTemplate>
                <label text="{{ name }}" textWrap="true" fontSize="18" margin="20" />
            </list-view.itemTemplate>
        </list-view>
            <FAB:fab tap="fabTap"
                     row="1"
                     icon="res://ic_add_white"
                     rippleColor="#f1f1f1"
                     class="fab-button" />
    </grid-layout>
</Page>

PLEASE NOTE: The fab is on the same row number as the listview


Angular NativeScript

import { registerElement } from "nativescript-angular/element-registry";
registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);
HTML
<StackLayout>
    <FAB (tap)="fabTap()" icon="res://ic_add_white" rippleColor="#f1f1f1" class="fab-button"></FAB>
</StackLayout>

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

JS

exports.fabTap = function(args) {
    console.log('tapped');
}

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
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

NativeScript Compatibility

NativeScript Version FloatingActionButton Plugin Version
1.6+ 2.+
1.5 1.91

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

Release Notes

2.2.0

  • Scale iOS images to 1/2 height
  • swipeAnimation property added to define animations for the FAB

Contributors