@nativescript-community/ui-material-floatingactionbutton

Material Design FAB performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Usage no npm install needed!

<script type="module">
  import nativescriptCommunityUiMaterialFloatingactionbutton from 'https://cdn.skypack.dev/@nativescript-community/ui-material-floatingactionbutton';
</script>

README

NativeScript Material Floating action button

Material Design's Floating action button component for NativeScript.

npm npm

Contents

  1. Installation
  2. Changelog
  3. FAQ
  4. Usage
  5. API

Installation

:warning: Warning :warning:

From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

For NativeScript 7.0+

  • tns plugin add @nativescript-community/ui-material-floatingactionbutton

For NativeScript 6.x

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

Changelog

FAQ

Usage

Plain NativeScript

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

XML

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

CSS

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

NativeScript + Angular

import { registerElement } from '@nativescript/angular/element-registry';
import { FloatingActionButton } from '@nativescript-community/ui-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-community/ui-material-floatingactionbutton/vue';

Vue.use(FloatingActionButtonPlugin);

<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"/>

API

Attributes

Inherite from NativeScript Button so it already has all the same 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.