Skip to content

Commit 35d757b

Browse files
bradmartinbradmartin
committed
merge
2 parents 2bfb18b + 6c041f9 commit 35d757b

1 file changed

Lines changed: 76 additions & 75 deletions

File tree

‎README.md‎

Lines changed: 76 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,89 @@
1-
# NativeScript-FloatingActionButton
1+
# NativeScript-FloatingActionButton
22
XML widget to create the Material Design Floating Action Button for 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
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
4242
Recommended 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) {
60-
console.log('tapped');
61-
}
62-
```
63-
64-
***
65-
66-
## Attributes
67-
68-
| Property | Android | iOS | Description | Note |
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) {
60+
console.log('tapped');
61+
}
62+
```
63+
64+
***
65+
66+
## Attributes
67+
68+
| Property | Android | iOS | Description | Note |
6969
|------------|-------------------|------|-------------|------|
7070
| backColor | X | X | Sets the background color of the button | None
7171
| icon | X | | Supports the same image source options that NativeScript images support | Required on android
7272
| rippleColor| X | | Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices | None
7373

7474
## NativeScript Compatibility
75-
75+
7676
| NativeScript Version | FloatingActionButton Plugin Version |
7777
|----------------------|-------------------------------------|
7878
| 1.6 | 2.+ |
7979
| 1.5 | 1.91 |
80-
81-
## iOS Notes
82-
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)
83-
As of this publish, it does not yet support images, however this is an Issue open.
84-
85-
### Contributors
86-
80+
81+
## iOS Notes
82+
- 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)
83+
As of this publish, it does not yet support images, however this is an Issue open.
84+
- Requires XCode CommandLineTools 7.1 to build, [the Cocoapod tanks when using 7.2](https://github.com/NativeScript/nativescript-cli/issues/1521)
85+
86+
### Contributors
87+
8788
- Lázaro Danillo [lazaromenezes](https://github.com/lazaromenezes)
88-
- Steve McNiven-Scott [sitefinitysteve](https://github.com/sitefinitysteve) - iOS
89+
- Steve McNiven-Scott [sitefinitysteve](https://github.com/sitefinitysteve) - iOS

0 commit comments

Comments
 (0)