Notoriously Punctual Manatee

    nativescript-material-floatingactionbutton
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.2 • Public • Published

    npm npm GitHub forks GitHub stars

    Installation

    If using @nativescript :

    • tns plugin add nativescript-material-floatingactionbutton

    If using tns-core-modules

    • tns plugin add nativescript-material-floatingactionbutton@2.5.4

    Be sure to run a new build after adding plugins to avoid any issues.


    Material Design Spec

    Usage

    Plain NativeScript

    IMPORTANT: Make sure you include xmlns:mdf="nativescript-material-floatingactionbutton" on the Page element

    XML

    <Page xmlns:mdf="nativescript-material-floatingactionbutton">
        <StackLayout horizontalAlignment="center">
            <mdf:FloatingActionButton src="res://ic_action_add"/>
            <mdf:FloatingActionButton elevation="5" src="res://ic_action_add"/>
       </StackLayout>
    </Page>

    CSS

    mdcfloatingactionbutton {
        ripple-color: blue;
        elevation: 4;
    }

    NativeScript + Angular

    import { registerElement } from '@nativescript/angular/element-registry';
    import { FloatingActionButton } from 'nativescript-material-floatingactionbutton';
    registerElement('MDFloatingActionButton', () => FloatingActionButton);
    <MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"></MDFloatingActionButton>

    NativeScript + Vue

    import Vue from 'nativescript-vue';
    import FloatingActionButtonPlugin from 'nativescript-material-floatingactionbutton/vue';
    
    Vue.use(FloatingActionButtonPlugin);
    <MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"/>

    Attributes

    Inherite from Nativescript Button so it already has all the same attributes

    Attributes

    • src optional

    An attribute to set the floatingactionbutton icon. For now FAB only support images as icon

    • elevation optional

    An attribute to set the elevation of the floatingactionbutton. This will increase the 'drop-shadow' of the floatingactionbutton.

    • rippleColor optional

    An attribute to set the ripple color of the floatingactionbutton.

    Install

    npm i nativescript-material-floatingactionbutton

    DownloadsWeekly Downloads

    38

    Version

    3.3.2

    License

    Apache-2.0

    Unpacked Size

    65.9 kB

    Total Files

    32

    Last publish

    Collaborators

    • farfromrefuge