Skip to content
This repository was archived by the owner on Jan 18, 2023. It is now read-only.

Commit af267e5

Browse files
bradmartinbradmartin
committed
NS 4x changes
1 parent 2624c34 commit af267e5

18 files changed

+191
-179
lines changed

‎.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"semi": true,
4+
"printWidth": 120
5+
}

‎README.md

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,49 @@
1-
[![nStudio Plugin](https://img.shields.io/badge/nStudio-Plugin-blue.svg)](http://nstudio.io)
1+
<p align="center">
2+
<p align="center">
3+
24
[![npm](https://img.shields.io/npm/v/nativescript-cardview.svg)](https://www.npmjs.com/package/nativescript-cardview)
35
[![npm](https://img.shields.io/npm/dt/nativescript-cardview.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-cardview)
6+
[![nStudio Plugin](https://img.shields.io/badge/nStudio-Plugin-blue.svg)](http://nstudio.io)
47

58
# NativeScript CardView :diamonds: :clubs:
69

710
A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.
811

12+
</p>
13+
914
##### [Material Design Card Spec](https://www.google.com/design/spec/components/cards.html)
10-
##### [CardView Android Documentation](http://developer.android.com/intl/zh-tw/reference/android/support/v7/widget/CardView.html)
1115

16+
##### [CardView Android Documentation](http://developer.android.com/intl/zh-tw/reference/android/support/v7/widget/CardView.html)
1217

1318
## Installation
1419

20+
##### NativeScript 4x
21+
22+
* `tns plugin add nativescript-cardview`
23+
24+
##### NativeScript 3x
25+
26+
* `tns plugin add [email protected]`
27+
1528
##### NativeScript 2.x
16-
- `tns plugin add nativescript-cardview@^1.3.2`
1729

18-
##### NativeScript 3+
19-
- `tns plugin add nativescript-cardview`
30+
* `tns plugin add [email protected]`
31+
32+
Be sure to run a new build after adding plugins to avoid any issues. Here is a post with some details: [Plugin Not Working after adding to project.](https://bradmartin.net/2016/07/20/ahhh-this-nativescript-plugin-doesnt-work/_)
2033

21-
*Be sure to run a new build after adding plugins to avoid any issues. Here is a post with some details: https://bradmartin.net/2016/07/20/ahhh-this-nativescript-plugin-doesnt-work/*
22-
2334
## Vanilla NativeScript
2435

25-
<span style="color:red">IMPORTANT: </span>*Make sure you include `xmlns:Card="nativescript-cardview"` on the Page element*
36+
<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:Card="nativescript-cardview"` on the Page element_
2637

2738
### XML
39+
2840
```XML
2941
<Page xmlns:Card="nativescript-cardview">
30-
<StackLayout>
42+
<StackLayout>
3143
<Card:CardView class="cardStyle" margin="10" elevation="40" radius="5">
3244
<grid-layout rows="200, auto, auto" columns="auto, auto, *">
3345
<image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" />
34-
<label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />
46+
<label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />
3547
<button text="DECLINE" tap="goAway" row="2" col="0" />
3648
<button text="ACCEPT" row="2" col="1" />
3749
</grid-layout>
@@ -41,14 +53,14 @@ A NativeScript plugin to provide an XML widget to implement the Material Design
4153
```
4254

4355
### CSS
56+
4457
```CSS
4558
.cardStyle {
4659
background-color: #3489db;
4760
color: #fff;
4861
}
4962
```
5063

51-
5264
## Angular NativeScript
5365

5466
```TS
@@ -71,43 +83,44 @@ elementRegistryModule.registerElement("CardView", () => require("nativescript-ca
7183

7284
## Attributes
7385

74-
* **radius** *optional*
86+
* **radius** _optional_
7587

7688
An attribute to control the 'border-radius' of the card.
7789

7890
### Platform specific options
7991

8092
#### Android
8193

82-
* **elevation** *optional*
94+
* **elevation** _optional_
8395

84-
An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card.
96+
An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card.
8597
There can be some performance impact when using a very high elevation value.
8698

8799
#### iOS
88100

89-
* **shadowOffsetWidth** *optional*
101+
* **shadowOffsetWidth** _optional_
90102

91103
An attribute to offset the x position of the shadow behind the card.
92-
93-
* **shadowOffsetHeight** *optional*
104+
105+
* **shadowOffsetHeight** _optional_
94106

95107
An attribute to offset the y position of the shadow behind the card.
96108

97-
* **shadowColor** *optional*
109+
* **shadowColor** _optional_
98110

99111
An attribute to set the color of the shadow behind the card.
100112

101-
* **shadowOpacity** *optional*
113+
* **shadowOpacity** _optional_
102114

103115
An attribute to set the opacity of the shadow behind the card.
104116

105-
* **shadowRadius** *optional*
117+
* **shadowRadius** _optional_
106118

107119
An attribute to set the radius of the shadow (shadow spread) behind the card.
108120

109121
The default values are set to:
110-
```
122+
123+
```
111124
radius = 2;
112125
shadowOffsetWidth = 0;
113126
shadowOffsetHeight = 2;
@@ -120,33 +133,32 @@ shadowRadius = 1;
120133

121134
#### Android
122135

123-
Sample 1 | Sample 2
124-
-------- | ---------
125-
![Sample1](images/sample_card1.png) | ![Sample2](images/sample_card2.png)
126-
136+
| Sample 1 | Sample 2 |
137+
| ----------------------------------- | ----------------------------------- |
138+
| ![Sample1](images/sample_card1.png) | ![Sample2](images/sample_card2.png) |
127139

128140
#### iOS
129141

130-
Sample 1 | Sample 2
131-
-------- | ---------
132-
![Sample1](images/sample_card1_ios.png) | ![Sample2](images/sample_card3_ios.png)
133-
142+
| Sample 1 | Sample 2 |
143+
| --------------------------------------- | --------------------------------------- |
144+
| ![Sample1](images/sample_card1_ios.png) | ![Sample2](images/sample_card3_ios.png) |
134145

135146
#### Contributing
147+
136148
[Please follow here](https://github.com/bradmartin/nativescript-cardview/blob/master/CONTRIBUTING.md)
137149

138150
#### Contributors
139151

140-
[<img alt="bradmartin" src="https://avatars3.githubusercontent.com/u/6006148?v=3&s=117" width="117">](https://github.com/bradmartin) |[<img alt="NathanWalker" src="https://avatars1.githubusercontent.com/u/457187?v=3&s=117" width="117">](https://github.com/NathanWalker) |[<img alt="manijak" src="https://avatars3.githubusercontent.com/u/3605066?v=3&s=117" width="117">](https://github.com/manijak) |[<img alt="NathanaelA" src="https://avatars0.githubusercontent.com/u/850871?v=3&s=117" width="117">](https://github.com/NathanaelA) |[<img alt="EddyVerbruggen" src="https://avatars2.githubusercontent.com/u/1426370?v=3&s=117" width="117">](https://github.com/EddyVerbruggen) |[<img alt="sis0k0" src="https://avatars1.githubusercontent.com/u/7893485?v=3&s=117" width="117">](https://github.com/sis0k0) |
141-
:---: |:---: |:---: |:---: |:---: |:---: |
142-
[bradmartin](https://github.com/bradmartin) |[NathanWalker](https://github.com/NathanWalker) |[manijak](https://github.com/manijak) |[NathanaelA](https://github.com/NathanaelA) |[EddyVerbruggen](https://github.com/EddyVerbruggen) |[sis0k0](https://github.com/sis0k0) |
143-
144-
[<img alt="vladimirnani" src="https://avatars0.githubusercontent.com/u/3397077?v=3&s=117" width="117">](https://github.com/vladimirnani) |[<img alt="DickSmith" src="https://avatars0.githubusercontent.com/u/6675511?v=3&s=117" width="117">](https://github.com/DickSmith) |
145-
:---: |:---: |
146-
[vladimirnani](https://github.com/vladimirnani) |[DickSmith](https://github.com/DickSmith) |
152+
| [<img alt="bradmartin" src="https://avatars3.githubusercontent.com/u/6006148?v=3&s=117" width="117">](https://github.com/bradmartin) | [<img alt="NathanWalker" src="https://avatars1.githubusercontent.com/u/457187?v=3&s=117" width="117">](https://github.com/NathanWalker) | [<img alt="manijak" src="https://avatars3.githubusercontent.com/u/3605066?v=3&s=117" width="117">](https://github.com/manijak) | [<img alt="NathanaelA" src="https://avatars0.githubusercontent.com/u/850871?v=3&s=117" width="117">](https://github.com/NathanaelA) | [<img alt="EddyVerbruggen" src="https://avatars2.githubusercontent.com/u/1426370?v=3&s=117" width="117">](https://github.com/EddyVerbruggen) | [<img alt="sis0k0" src="https://avatars1.githubusercontent.com/u/7893485?v=3&s=117" width="117">](https://github.com/sis0k0) |
153+
| :----------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
154+
| [bradmartin](https://github.com/bradmartin) | [NathanWalker](https://github.com/NathanWalker) | [manijak](https://github.com/manijak) | [NathanaelA](https://github.com/NathanaelA) | [EddyVerbruggen](https://github.com/EddyVerbruggen) | [sis0k0](https://github.com/sis0k0) |
147155

156+
| [<img alt="vladimirnani" src="https://avatars0.githubusercontent.com/u/3397077?v=3&s=117" width="117">](https://github.com/vladimirnani) | [<img alt="DickSmith" src="https://avatars0.githubusercontent.com/u/6675511?v=3&s=117" width="117">](https://github.com/DickSmith) |
157+
| :--------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: |
158+
| [vladimirnani](https://github.com/vladimirnani) | [DickSmith](https://github.com/DickSmith) |
148159

149160
## [nStudio, LLC](http://nstudio.io)
150-
[![nStudio](./images/nstudio-banner.png "nStudio")](http://nStudio.io)
151161

152-
Do you need assistance on your project or plugin? Contact the nStudio team anytime at <[email protected]> to get up to speed with the best practices in mobile and web app development.
162+
[![nStudio](./images/nstudio-banner.png 'nStudio')](http://nStudio.io)
163+
164+
Do you need assistance on your project or plugin? Contact the nStudio team anytime at <mailto:[email protected]> to get up to speed with the best practices in mobile and web app development.

‎demo/app/app.css

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,80 @@
11
.Material {
2-
font-family: MaterialIcons-Regular, Material Icons;
2+
font-family: MaterialIcons-Regular, Material Icons;
33
}
44

55
button {
6-
font-family: 'Roboto', Roboto;
6+
font-family: 'Roboto', Roboto;
77
}
88

99
.align-center {
10-
vertical-align: center;
11-
horizontal-align: center;
10+
vertical-align: center;
11+
horizontal-align: center;
1212
}
1313

1414
.title {
15-
font-size: 30;
16-
margin: 4;
15+
font-size: 30;
16+
margin: 4;
1717
}
1818

1919
.subtitle {
20-
font-size: 24;
20+
font-size: 24;
2121
}
2222

2323
.info {
24-
font-size: 20;
25-
margin:4;
24+
font-size: 20;
25+
margin: 4;
2626
}
2727

2828
.size16 {
29-
font-size: 16;
30-
margin: 2;
29+
font-size: 16;
30+
margin: 2;
3131
}
3232

3333
.clear-btn {
34-
background-color: white;
35-
padding:5px;
34+
background-color: white;
35+
padding: 5px;
3636
}
3737

3838
.blue {
39-
color: #6A78C5;
39+
color: #6a78c5;
4040
}
4141

4242
.gray {
43-
color: #666;
43+
color: #666;
4444
}
4545

4646
.white {
47-
color: #fff;
47+
color: #fff;
4848
}
4949

5050
.avatar-circle {
51-
font-size:35;
52-
height: 50;
53-
width: 50;
54-
color: #fff;
55-
background-color: #FF4081;
56-
border-radius: 25;
57-
margin-left: 16;
58-
margin-top: 5;
59-
horizontal-align: center;
60-
vertical-align: center;
61-
text-align: center;
51+
font-size: 35;
52+
height: 50;
53+
width: 50;
54+
color: #fff;
55+
background-color: #ff4081;
56+
border-radius: 25;
57+
margin-left: 16;
58+
margin-top: 5;
59+
horizontal-align: center;
60+
vertical-align: center;
61+
text-align: center;
6262
}
6363

6464
.blackCard {
65-
background-color: #333;
66-
color: white;
65+
background-color: #333;
66+
color: white;
6767
}
6868

6969
.blueCard {
70-
background-color: #3489db;
71-
color: white;
70+
background-color: #3489db;
71+
color: white;
7272
}
7373

7474
.jokerCard {
75-
background-color: yellow;
75+
background-color: yellow;
7676
}
7777

7878
.whiteCard {
79-
background-color:#fff;
80-
}
79+
background-color: #fff;
80+
}

‎demo/app/app.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import * as app from "tns-core-modules/application";
1+
import * as app from 'tns-core-modules/application';
22

3-
app.start({ moduleName: "main-page" });
3+
app.start({ moduleName: 'main-page' });

‎demo/app/main-page.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Demo } from "./main-view-model";
1+
import { Demo } from './main-view-model';
22

33
function pageLoaded(args) {
4-
var page = args.object;
4+
const page = args.object;
55
page.bindingContext = new Demo();
66
}
77
exports.pageLoaded = pageLoaded;

‎demo/app/main-view-model.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { EventData, Observable } from "tns-core-modules/data/observable";
2-
import { CardView } from "nativescript-cardview";
3-
import { isAndroid, isIOS } from "tns-core-modules/platform";
4-
import * as frame from "tns-core-modules/ui/frame";
1+
import { EventData, Observable } from 'tns-core-modules/data/observable';
2+
import { CardView } from 'nativescript-cardview';
3+
import { isAndroid, isIOS } from 'tns-core-modules/platform';
4+
import * as frame from 'tns-core-modules/ui/frame';
55

66
export class Demo extends Observable {
77
constructor() {
@@ -10,39 +10,39 @@ export class Demo extends Observable {
1010

1111
public goAway(args) {
1212
const page = frame.topmost().currentPage;
13-
const card = <CardView>page.getViewById("batCard");
13+
const card = page.getViewById('batCard') as CardView;
1414
card
1515
.animate({
1616
scale: { x: 0, y: 0 },
1717
opacity: 0,
1818
duration: 1000
1919
})
2020
.then(() => {
21-
card.visibility = "collapse";
21+
card.visibility = 'collapse';
2222
});
2323
}
2424

2525
public goAwayJoker(args) {
2626
const page = frame.topmost().currentPage;
27-
const card = <CardView>page.getViewById("jokerCard");
27+
const card = page.getViewById('jokerCard') as CardView;
2828
card
2929
.animate({
3030
scale: { x: 0, y: 0 },
3131
opacity: 0,
3232
duration: 1000
3333
})
3434
.then(() => {
35-
card.visibility = "collapse";
35+
card.visibility = 'collapse';
3636
});
3737
}
3838

3939
public cardLoaded(args: EventData) {
40-
const card = <CardView>args.object;
41-
console.log("card = " + card);
40+
const card = args.object as CardView;
41+
console.log('card = ' + card);
4242
if (isAndroid) {
43-
console.log("card native android = " + card.android);
43+
console.log('card native android = ' + card.android);
4444
} else if (isIOS) {
45-
console.log("card native ios = " + card.ios);
45+
console.log('card native ios = ' + card.ios);
4646
}
4747
}
4848
}

0 commit comments

Comments
 (0)