NativeScript FloatingActionButton .
NativeScript plugin for the floating button component of the user interface.
Installation
Native Scenario 7+ :
The ns plugin adds @nstudio/nativescript-floatingbutton
NativeScript under 7 :
tns plugin adds @nstudio/[protected by email]
Screenshots
Support for multiple FAB/Swipe animations
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’ ;
registerElement(
‘Fab’,
() => require(‘@nstudio/nativescript-floatingbutton’). Fab) ;
HTML
NativeScript Vue
import View from “nativecript-view”;
View.registerElement(
‘Fab’,
() => require(‘@nstudio/nativescript-floatingbutton’). Fab) ;
Model
CSS
Recommended CSS styles.
.fab button { height:
70;
width: 70; //// this is
required on iOS – Android does not require a width, so you may need to adjust the stylesmargin:
15;
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:
API
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 demo.android
//and/or
npm demo.ios
GitHub
Related Tags:
android fancy menu,android design examples,android material design 2019,android example 365,android menu animation example,particle textview android