NativeScript FloatingActionButton .

NativeScript plugin for the floating button component of the user interface.


Native Scenario 7+ :

The ns plugin adds @nstudio/nativescript-floatingbutton

NativeScript under 7 :

tns plugin adds @nstudio/[protected by email]


NativeScript plugin for Material Design Floating Action Button UI component

Support for multiple FAB/Swipe animations

NativeScript plugin for Material Design Floating Action Button UI component

the use of

The FAB icon can be a local image in your application or an App_Resources image/icon.

simple native script


NativeScript corner

Importeer Sie {register-element} aus dem ‘aboriginal/depth/element-register’ ;
() => require(‘@nstudio/nativescript-floatingbutton’). Fab) ;



NativeScript Vue

import View from “nativecript-view”;

() => require(‘@nstudio/nativescript-floatingbutton’). Fab) ;




Recommended CSS styles.

.fab button { height:
width: 70; //// this is
required on iOS – Android does not require a width, so you may need to adjust the stylesmargin:
background color: #ff4081;
horizontal alignment: right;
vertical alignment: bottom;

Using symbols

First you need to configure the icon fonts as described in the NativeScript documentation.

Then you can use the icon fonts on FAB by specifying Unicode as text and adding the class fas/far:



Color ripple on lollipop devices, it fills the FOB on lollipop devices on lollipopsNo

center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix für
weitere Details siehe Android-DocsDefault ist center

Property Android iOS Description Note
background-color X X Sets the background color of the button
Symbol X X Supports the same image source parameters as NativeScript images. Required for Android
Text X X Enables the use of text instead of images Can be styled with CSS* font and color properties
rippleColor X
hidden on the website. X X It teaches the tissue to come alive inside and outside the snail. Pass the name of the view you want to monitor for the sample scrolling event: hideOnSwipeOfView=”userListView”.
hideAnimationDuration X X How many milliseconds does it take for the button to go off? Default if not set: 300 ms
swipeAnimation X X slideDown, slideUp, slideLeft, slideRight, scale The default value is slideDown
androidScaleType X

iOS Notes

  • We are using Matt Nydam’s FloatingActionButton.
  • Required properties are width and height
  • The symbol is a mandatory property, if it is left as an empty string, it will be displayed by default.

Implementation of demonstration requests

version npm


npm demo.ios


android fancy menu,android design examples,android material design 2019,android example 365,android menu animation example,particle textview android

You May Also Like

How To Fix Thumbnails Not Showing In Windows 10

The Windows thumbnail function makes it easy to recognize photos and movies…

A Complete Guide On Resolving The Issue of Phone Overheating

The phone can sometimes even get hot, whether it’s during a game…

How To Fix Windows 10 File Explorer Dark Theme Not Working

When it comes to customisation options, Windows 10 offers users a considerable…

Apex Legends Crashing PC Fix 2020

Various problems can occur during gambling. If you’re playing the new royal…