Skip to content

Commit c55c203

Browse files
bradmartinbradmartin
committed
merge
2 parents 8a2f04c + 63b1b3c commit c55c203

17 files changed

Lines changed: 739 additions & 416 deletions

File tree

‎.gitignore‎

Lines changed: 208 additions & 207 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 79 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,81 @@
1-
# NativeScript-FloatingActionButton
2-
XML widget to create the Material Design Floating Action Button for Android NativeScript apps
3-
4-
[Material Design Floating Action Button Spec](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
5-
6-
## Installation
7-
`npm install nativescript-floatingactionbutton`
8-
9-
### Screenshot
10-
---------------
11-
![FAB Screenshot](screens/fab.png)
12-
13-
## Usage
14-
15-
#### XML
16-
##### **NOTE** The sample XML here will position the FAB on top of the ListView. There is no need for absolute positioning.
17-
```XML
18-
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
19-
xmlns:FAB="nativescript-floatingactionbutton">
20-
<Page.actionBar>
21-
<ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
22-
</Page.actionBar>
23-
<grid-layout rows="auto, *">
24-
<list-view row="1" items="{{ users }}">
25-
<list-view.itemTemplate>
26-
<label text="{{ name }}" textWrap="true" fontSize="18" margin="20" />
27-
</list-view.itemTemplate>
28-
</list-view>
29-
<android row="1">
30-
<FAB:fab tap="fabTap"
31-
row="1"
32-
icon="res://ic_add_white"
33-
backColor="#ff4081"
34-
rippleColor="#f1f1f1"
35-
class="fab-button" />
36-
</android>
37-
</grid-layout>
38-
</Page>
39-
```
40-
41-
#### CSS
42-
I recommend the following CSS styles.
43-
```CSS
44-
.fab-button {
45-
height: 70;
46-
horizontal-align: right;
47-
vertical-align: bottom;
48-
margin: 15;
49-
}
50-
```
51-
52-
#### JS
53-
54-
```JS
55-
function fabTap(args) {
1+
# NativeScript-FloatingActionButton
2+
XML widget to create the Material Design Floating Action Button for Android NativeScript apps
3+
4+
[Material Design Floating Action Button Spec](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
5+
6+
## Installation
7+
`npm install nativescript-floatingactionbutton`
8+
9+
### Screenshot
10+
---------------
11+
![FAB Android Screenshot](screens/android.png)
12+
![FAB iOS Screenshot](screens/ios.png)
13+
14+
## Usage
15+
16+
#### XML
17+
##### **NOTE** The sample XML here will position the FAB on top of the ListView. There is no need for absolute positioning.
18+
```XML
19+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
20+
xmlns:FAB="nativescript-floatingactionbutton">
21+
<Page.actionBar>
22+
<ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
23+
</Page.actionBar>
24+
<grid-layout rows="auto, *">
25+
<list-view row="1" items="{{ users }}">
26+
<list-view.itemTemplate>
27+
<label text="{{ name }}" textWrap="true" fontSize="18" margin="20" />
28+
</list-view.itemTemplate>
29+
</list-view>
30+
<FAB:fab tap="fabTap"
31+
row="1"
32+
icon="res://ic_add_white"
33+
rippleColor="#f1f1f1"
34+
class="fab-button" />
35+
</grid-layout>
36+
</Page>
37+
```
38+
PLEASE NOTE: The fab is on the same **row number** as the listview
39+
***
40+
41+
#### CSS
42+
I recommend the following CSS styles.
43+
```CSS
44+
.fab-button {
45+
height: 70;
46+
margin: 15;
47+
background-color: #ff4081;
48+
horizontal-align: right; /* Android Only */
49+
vertical-align: bottom; /* Android Only */
50+
color: #fff; /* iOS Only */
51+
}
52+
```
53+
54+
***
55+
56+
#### JS
57+
58+
```JS
59+
exports.fabTap = function(args) {
5660
console.log('tapped');
5761
}
58-
exports.fabTap = fabTap;
59-
```
60-
61-
#### Attributes
62-
**backColor** - optional
63-
64-
Attribute to specify the background color of the FAB
65-
66-
**rippleColor** - optional
67-
68-
Attribute to set the ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices
69-
70-
**icon** - required
71-
72-
Attribute to specify which icon to use for the FAB button, supports the same image source options that NativeScript images support.
73-
74-
### Contributors
75-
76-
- L�zaro Danillo [lazaromenezes](https://github.com/lazaromenezes)
62+
```
63+
64+
***
65+
66+
## Attributes
67+
| Property | Android | iOS | Description | Note |
68+
|----------|:-------------:|------:|--|--|
69+
| backColor | X | X | Sets the background color of the button | None
70+
| icon | X | | Supports the same image source options that NativeScript images support | Required on android
71+
| rippleColor | X | |Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices | None
72+
73+
74+
## iOS Notes
75+
Since iOS doesn't have a native FAB, we're using the amazing [KCFloatingActionButton](https://cocoapods.org/pods/KCFloatingActionButton) by [Lee Sun-Hyoup](https://github.com/kciter)
76+
As of this publish, it does not yet support images, however this is an Issue open.
77+
78+
### Contributors
79+
80+
- L�zaro Danillo [lazaromenezes](https://github.com/lazaromenezes)
81+
- Steve McNiven-Scott [sitefinitysteve](https://github.com/sitefinitysteve) - iOS

‎demo/app/App_Resources/Android/AndroidManifest.xml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3+
package="__PACKAGE__"
4+
android:versionCode="1"
5+
android:versionName="1.0">
6+
7+
<supports-screens
8+
android:smallScreens="true"
9+
android:normalScreens="true"
10+
android:largeScreens="true"
11+
android:xlargeScreens="true"/>
12+
13+
<uses-sdk
14+
android:minSdkVersion="17"
15+
android:targetSdkVersion="__APILEVEL__"/>
16+
17+
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
18+
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
19+
<uses-permission android:name="android.permission.INTERNET"/>
20+
21+
<application
22+
android:name="com.tns.NativeScriptApplication"
23+
android:allowBackup="true"
24+
android:icon="@drawable/icon"
25+
android:label="@string/app_name"
26+
android:theme="@style/AppTheme" >
27+
<activity
28+
android:name="com.tns.NativeScriptActivity"
29+
android:label="@string/title_activity_kimera"
30+
android:configChanges="keyboardHidden|orientation|screenSize">
31+
32+
<intent-filter>
33+
<action android:name="android.intent.action.MAIN" />
34+
35+
<category android:name="android.intent.category.LAUNCHER" />
36+
</intent-filter>
37+
</activity>
38+
<activity android:name="com.tns.ErrorReportActivity"/>
39+
</application>
40+
</manifest>

‎demo/app/App_Resources/iOS/Info.plist‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>CFBundleDevelopmentRegion</key>
6+
<string>en</string>
7+
<key>CFBundleDisplayName</key>
8+
<string>${PRODUCT_NAME}</string>
9+
<key>CFBundleExecutable</key>
10+
<string>${EXECUTABLE_NAME}</string>
11+
<key>CFBundleInfoDictionaryVersion</key>
12+
<string>6.0</string>
13+
<key>CFBundleName</key>
14+
<string>${PRODUCT_NAME}</string>
15+
<key>CFBundlePackageType</key>
16+
<string>APPL</string>
17+
<key>CFBundleShortVersionString</key>
18+
<string>1.0</string>
19+
<key>CFBundleSignature</key>
20+
<string>????</string>
21+
<key>CFBundleVersion</key>
22+
<string>1.0</string>
23+
<key>LSRequiresIPhoneOS</key>
24+
<true/>
25+
<key>UILaunchStoryboardName</key>
26+
<string>LaunchScreen</string>
27+
<key>UIRequiredDeviceCapabilities</key>
28+
<array>
29+
<string>armv7</string>
30+
</array>
31+
<key>UISupportedInterfaceOrientations</key>
32+
<array>
33+
<string>UIInterfaceOrientationPortrait</string>
34+
<string>UIInterfaceOrientationLandscapeLeft</string>
35+
<string>UIInterfaceOrientationLandscapeRight</string>
36+
</array>
37+
<key>UISupportedInterfaceOrientations~ipad</key>
38+
<array>
39+
<string>UIInterfaceOrientationPortrait</string>
40+
<string>UIInterfaceOrientationPortraitUpsideDown</string>
41+
<string>UIInterfaceOrientationLandscapeLeft</string>
42+
<string>UIInterfaceOrientationLandscapeRight</string>
43+
</array>
44+
</dict>
45+
</plist>

‎demo/app/App_Resources/iOS/ic_add_white.png‎

127 Bytes
Loading

‎demo/app/app.css‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
1-
.title {
2-
font-size: 26;
3-
horizontal-align: center;
4-
margin: 20;
5-
}
6-
7-
button {
8-
font-size: 42;
9-
horizontal-align: center;
10-
}
11-
12-
.message {
13-
font-size: 20;
14-
color: #284848;
15-
horizontal-align: center;
16-
}
17-
1+
.title {
2+
font-size: 26;
3+
horizontal-align: center;
4+
margin: 20;
5+
}
6+
7+
button {
8+
font-size: 42;
9+
horizontal-align: center;
10+
}
11+
12+
.message {
13+
font-size: 20;
14+
color: #284848;
15+
horizontal-align: center;
16+
}
17+
1818
.fab-button {
19-
height: 70;
19+
height: 50;
20+
width: 50;
2021
margin: 15;
2122
horizontal-align: right;
2223
vertical-align: bottom;
24+
color: #FFF;
25+
background-color: #ff4081;
2326
}

‎demo/app/main-page.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
var app = require("application");
22
var observable = require("data/observable");
3+
var observableArrayModule = require("data/observable-array");
34
var platformModule = require("platform");
45
var color = require("color");
56

6-
var users = [
7-
{ name: 'Billy Bob' },
8-
{ name: 'Tweeder' },
9-
{ name: 'Mox' },
10-
{ name: 'Coach' },
11-
{ name: 'Lance' },
12-
{ name: 'Johnson' },
13-
{ name: 'William' },
14-
{ name: 'Franklin' },
15-
{ name: 'Napoleon' },
16-
];
7+
var users = [
8+
{ name: 'Billy Bob' },
9+
{ name: 'Tweeder' },
10+
{ name: 'Mox' },
11+
{ name: 'Coach' },
12+
{ name: 'Lance' },
13+
{ name: 'Johnson' },
14+
{ name: 'William' },
15+
{ name: 'Franklin' }
16+
];
1717
var viewModel = new observable.Observable({
18-
users: users
18+
users: new observableArrayModule.ObservableArray(users)
1919
});
2020

2121
function pageLoaded(args) {
2222
var page = args.object;
23-
// Change statusbar color on Lollipop
24-
if (platformModule.device.sdkVersion >= "21") {
25-
var window = app.android.startActivity.getWindow();
26-
window.setStatusBarColor(new color.Color("#303F9F").android);
23+
if(app.android){
24+
// Change statusbar color on Lollipop
25+
if (platformModule.device.sdkVersion >= "21") {
26+
var window = app.android.startActivity.getWindow();
27+
window.setStatusBarColor(new color.Color("#303F9F").android);
28+
}
2729
}
2830
page.bindingContext = viewModel;
2931
}
30-
exports.pageLoaded = pageLoaded;
32+
exports.pageLoaded = pageLoaded;
33+
34+
exports.fabTap = function(args){
35+
viewModel.users.push({ name: "Gary"});
36+
}

‎demo/app/main-page.xml‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
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 rows="auto, *">
7-
<list-view row="1" items="{{ users }}">
8-
<list-view.itemTemplate>
9-
<label text="{{ name }}" textWrap="true" fontSize="18" margin="20" />
10-
</list-view.itemTemplate>
11-
</list-view>
12-
<android row="1">
13-
<FAB:fab tap="fabTap"
14-
row="1"
15-
icon="res://ic_add_white"
16-
backColor="#ff4081"
17-
rippleColor="#f1f1f1"
18-
class="fab-button" />
19-
</android>
20-
</grid-layout>
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 rows="auto, *">
7+
<list-view row="1" items="{{ users }}">
8+
<list-view.itemTemplate>
9+
<label text="{{ name }}" textWrap="true" fontSize="15" margin="20" />
10+
</list-view.itemTemplate>
11+
</list-view>
12+
<FAB:fab
13+
id="fabButton"
14+
row="1"
15+
icon="res://ic_add_white"
16+
tap="fabTap"
17+
rippleColor="blue"
18+
class="fab-button" />
19+
</grid-layout>
2120
</Page>

0 commit comments

Comments
 (0)