Skip to content

Commit c85273b

Browse files
sitefinitystevesitefinitysteve
committed
Update Demos\Readme
1 parent 2f0b323 commit c85273b

File tree

10 files changed

+133
-11
lines changed

10 files changed

+133
-11
lines changed

‎README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ XML widget to create the Material Design Floating Action Button for NativeScript
1111
![FAB Android Screenshot](screens/android.png)
1212
![FAB iOS Screenshot](screens/ios.png)
1313

14+
### Multiple FAB/Swipe Animation Support
15+
![FAB Animations](screens/animations.gif)
16+
1417
## Usage
1518

1619
#### XML
@@ -66,7 +69,7 @@ exports.fabTap = function(args) {
6669

6770
| Property | Android | iOS | Description | Note |
6871
|------------|-------------------|------|-------------|------|
69-
| backColor | X | X | Sets the background color of the button | None
72+
| backColor | X | X | Sets the background color of the button | Better set in CSS
7073
| icon | X | X | Supports the same image source options that NativeScript images support | Required on android
7174
| rippleColor| X | | Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices | None
7275
| 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"
@@ -77,7 +80,7 @@ exports.fabTap = function(args) {
7780

7881
| NativeScript Version | FloatingActionButton Plugin Version |
7982
|----------------------|-------------------------------------|
80-
| 1.6 | 2.+ |
83+
| 1.6+ | 2.+ |
8184
| 1.5 | 1.91 |
8285

8386
## iOS Notes

‎demo/app/app.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@ button {
2525
background-color: #ff4081;
2626
}
2727

28-
.options{
28+
.commands{
29+
padding: 10 5;
2930
background-color: #f0f0f0;
3031
}
3132

32-
.options Button{
33+
.commands Button{
3334
font-size: 14;
3435
}

‎demo/app/app.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
var application = require("application");
2-
application.mainModule = "main-page";
2+
//application.mainModule = "main-page";
3+
application.mainModule = "multifab";
34
application.cssFile = "./app.css";
45
application.start();

‎demo/app/main-page.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ var app = require("application");
22
var observable = require("data/observable");
33
var observableArrayModule = require("data/observable-array");
44
var platformModule = require("platform");
5+
var frameModule = require("ui/frame");
56
var color = require("color");
67
var fab;
78

@@ -45,6 +46,6 @@ exports.fabTap = function(args){
4546
viewModel.users.unshift({ name: "Gary"});
4647
}
4748

48-
exports.onAnimateUp = function(args){
49-
fab.swipeAnimation = "slideUp";
49+
exports.goMultiFab = function(args){
50+
frameModule.topmost().navigate("multifab");;
5051
}

‎demo/app/main-page.xml

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@
33
<Page.actionBar>
44
<ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
55
</Page.actionBar>
6-
<grid-layout rows="*">
7-
<list-view id="userList" row="0" items="{{ users }}">
6+
<grid-layout rows="auto,*">
7+
<StackLayout row="0" orientation="horizontal" class="commands">
8+
<Button text="MultiFab" tap="goMultiFab" />
9+
</StackLayout>
10+
<list-view id="userList" row="1" items="{{ users }}">
811
<list-view.itemTemplate>
912
<label text="{{ name }}" textWrap="true" fontSize="15" margin="20" />
1013
</list-view.itemTemplate>
1114
</list-view>
1215
<FAB:fab
1316
id="fabButton"
14-
row="0"
17+
row="1"
1518
icon="res://ic_add_white"
1619
tap="fabTap"
1720
rippleColor="#ffffff"

‎demo/app/multifab.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.fab-button {
2+
height: 50;
3+
width: 50;
4+
margin: 15;
5+
color: #FFF;
6+
background-color: #ff4081;
7+
}
8+
9+
.top-left{
10+
horizontal-align: left;
11+
vertical-align: top;
12+
}
13+
14+
.top-right{
15+
horizontal-align: right;
16+
vertical-align: top;
17+
}
18+
19+
.bottom-left{
20+
horizontal-align: left;
21+
vertical-align: bottom;
22+
}
23+
24+
.bottom-right{
25+
horizontal-align: right;
26+
vertical-align: bottom;
27+
}
28+
29+
.center{
30+
horizontal-align: center;
31+
vertical-align: center;
32+
}

‎demo/app/multifab.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var app = require("application");
2+
var observable = require("data/observable");
3+
var observableArrayModule = require("data/observable-array");
4+
var platformModule = require("platform");
5+
var color = require("color");
6+
var fab;
7+
8+
function pageLoaded(args) {
9+
var page = args.object;
10+
if(app.android){
11+
// Change statusbar color on Lollipop
12+
if (platformModule.device.sdkVersion >= "21") {
13+
var window = app.android.startActivity.getWindow();
14+
window.setStatusBarColor(new color.Color("#303F9F").android);
15+
}
16+
}
17+
18+
fab = page.getViewById("fabButton");
19+
}
20+
exports.pageLoaded = pageLoaded;
21+
22+
exports.fabTap = function(args){
23+
alert("tap");
24+
}

‎demo/app/multifab.xml

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
2+
xmlns:FAB="nativescript-floatingactionbutton">
3+
<Page.actionBar>
4+
<ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
5+
</Page.actionBar>
6+
<grid-layout id="userList" rows="*">
7+
<FAB:fab
8+
id="fabButtonTopLeft"
9+
row="0"
10+
icon="res://ic_add_white"
11+
tap="fabTap"
12+
rippleColor="#ffffff"
13+
class="fab-button top-left"
14+
hideOnSwipeOfView="userList"
15+
swipeAnimation="slideUp" /> <!-- slideDown, slideUp, slideRight, slideLeft, scale -->
16+
17+
<FAB:fab
18+
id="fabButtonTopRight"
19+
row="0"
20+
icon="res://ic_add_white"
21+
tap="fabTap"
22+
rippleColor="#ffffff"
23+
class="fab-button top-right"
24+
hideOnSwipeOfView="userList"
25+
swipeAnimation="slideRight" /> <!-- slideDown, slideUp, slideRight, slideLeft, scale -->
26+
27+
<FAB:fab
28+
id="fabButtonBottomLeft"
29+
row="0"
30+
icon="res://ic_add_white"
31+
tap="fabTap"
32+
rippleColor="#ffffff"
33+
class="fab-button bottom-left"
34+
hideOnSwipeOfView="userList"
35+
swipeAnimation="slideLeft" /> <!-- slideDown, slideUp, slideRight, slideLeft, scale -->
36+
37+
<FAB:fab
38+
id="fabButtonBottomRight"
39+
row="0"
40+
icon="res://ic_add_white"
41+
tap="fabTap"
42+
rippleColor="#ffffff"
43+
class="fab-button bottom-right"
44+
hideOnSwipeOfView="userList"
45+
swipeAnimation="slideDown" /> <!-- slideDown, slideUp, slideRight, slideLeft, scale -->
46+
47+
<FAB:fab
48+
id="fabButtonCenter"
49+
row="0"
50+
icon="res://ic_add_white"
51+
tap="fabTap"
52+
rippleColor="#ffffff"
53+
class="fab-button center"
54+
hideOnSwipeOfView="userList"
55+
swipeAnimation="scale" /> <!-- slideDown, slideUp, slideRight, slideLeft, scale -->
56+
</grid-layout>
57+
</Page>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nativescript-floatingactionbutton",
3-
"version": "2.2.0",
3+
"version": "2.2.1",
44
"description": "A NativeScript plugin to provide an XML widget to implement the Material Design Floating Action Button in NativeScript apps.",
55
"main": "fab.js",
66
"nativescript": {

‎screens/animations.gif

862 KB
Loading

0 commit comments

Comments
 (0)