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

Commit d474a07

Browse files
bradmartinbradmartin
committed
contributors update
1 parent ac55ecc commit d474a07

2 files changed

Lines changed: 138 additions & 113 deletions

File tree

‎README.md‎

Lines changed: 134 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,134 @@
1-
[![npm](https://img.shields.io/npm/v/nativescript-cardview.svg)](https://www.npmjs.com/package/nativescript-cardview)
2-
[![npm](https://img.shields.io/npm/dt/nativescript-cardview.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-cardview)
3-
4-
# NativeScript CardView :diamonds: :clubs:
5-
6-
A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.
7-
8-
##### [Material Design Card Spec](https://www.google.com/design/spec/components/cards.html)
9-
##### [CardView Android Documentation](http://developer.android.com/intl/zh-tw/reference/android/support/v7/widget/CardView.html)
10-
##### iOS version uses the [MaterialCard](https://cocoapods.org/pods/MaterialCard) pod by [Nathan Walker](https://github.com/NathanWalker)
11-
12-
13-
## Installation
14-
`npm install nativescript-cardview`
15-
16-
## Usage
17-
18-
<span style="color:red">IMPORTANT: </span>*Make sure you include `xmlns:Card="nativescript-cardview"` on the Page element*
19-
20-
### XML
21-
```XML
22-
<Page xmlns:Card="nativescript-cardview">
23-
<StackLayout>
24-
<Card:CardView class="cardStyle" margin="10" elevation="40" radius="5">
25-
<grid-layout rows="200, auto, auto" columns="auto, auto, *">
26-
<image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" />
27-
<label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />
28-
<button text="DECLINE" tap="goAway" row="2" col="0" />
29-
<button text="ACCEPT" row="2" col="1" />
30-
</grid-layout>
31-
</Card:CardView>
32-
</StackLayout>
33-
</Page>
34-
```
35-
36-
### CSS
37-
```CSS
38-
.cardStyle {
39-
background-color: #3489db;
40-
color: #fff;
41-
}
42-
```
43-
44-
## Attributes
45-
46-
* **radius** *optional*
47-
48-
An attribute to control the 'border-radius' of the card.
49-
50-
### Platform specific options
51-
52-
#### Android
53-
54-
* **elevation** *optional*
55-
56-
An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card.
57-
There can be some performance impact when using a very high elevation value.
58-
59-
#### iOS
60-
61-
* **shadowOffsetWidth** *optional*
62-
63-
An attribute to offset the x position of the shadow behind the card.
64-
65-
* **shadowOffsetHeight** *optional*
66-
67-
An attribute to offset the y position of the shadow behind the card.
68-
69-
* **shadowColor** *optional*
70-
71-
An attribute to set the color of the shadow behind the card.
72-
73-
* **shadowOpacity** *optional*
74-
75-
An attribute to set the opacity of the shadow behind the card.
76-
77-
The default values are set to:
78-
```
79-
radius = 2;
80-
shadowOffsetWidth = 0;
81-
shadowOffsetHeight = 2;
82-
shadowColor = new Color('#000').ios
83-
shadowOpacity = 0.4;
84-
```
85-
86-
## Sample Screenshots
87-
88-
#### Android
89-
90-
Sample 1 | Sample 2
91-
-------- | ---------
92-
![Sample1](screenshots/sample_card1.png) | ![Sample2](screenshots/sample_card2.png)
93-
94-
Sample 3 | Sample 4
95-
-------- | -------
96-
![Sample3](screenshots/sample_card3.png) | ![Sample4](screenshots/sample_card4.png)
97-
98-
#### iOS
99-
100-
Sample 1 | Sample 2
101-
-------- | ---------
102-
![Sample1](screenshots/sample_card1_ios.png) | ![Sample2](screenshots/sample_card2_ios.png)
103-
104-
Sample 3 | Sample 4
105-
-------- | -------
106-
![Sample3](screenshots/sample_card3_ios.png) | ![Sample4](screenshots/sample_card4_ios.png)
107-
108-
#### Contributing
109-
[Please follow here](https://github.com/bradmartin/nativescript-cardview/blob/master/CONTRIBUTING.md)
110-
111-
#### Contributors
112-
- [NathanaelA](https://github.com/NathanaelA)
113-
- [NathanWalker](https://github.com/NathanWalker)
1+
[![npm](https://img.shields.io/npm/v/nativescript-cardview.svg)](https://www.npmjs.com/package/nativescript-cardview)
2+
[![npm](https://img.shields.io/npm/dt/nativescript-cardview.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-cardview)
3+
4+
# NativeScript CardView :diamonds: :clubs:
5+
6+
A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.
7+
8+
##### [Material Design Card Spec](https://www.google.com/design/spec/components/cards.html)
9+
##### [CardView Android Documentation](http://developer.android.com/intl/zh-tw/reference/android/support/v7/widget/CardView.html)
10+
##### iOS version uses the [MaterialCard](https://cocoapods.org/pods/MaterialCard) pod by [Nathan Walker](https://github.com/NathanWalker)
11+
12+
13+
## Installation
14+
`npm install nativescript-cardview`
15+
16+
## Vanilla NativeScript
17+
18+
<span style="color:red">IMPORTANT: </span>*Make sure you include `xmlns:Card="nativescript-cardview"` on the Page element*
19+
20+
### XML
21+
```XML
22+
<Page xmlns:Card="nativescript-cardview">
23+
<StackLayout>
24+
<Card:CardView class="cardStyle" margin="10" elevation="40" radius="5">
25+
<grid-layout rows="200, auto, auto" columns="auto, auto, *">
26+
<image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" />
27+
<label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />
28+
<button text="DECLINE" tap="goAway" row="2" col="0" />
29+
<button text="ACCEPT" row="2" col="1" />
30+
</grid-layout>
31+
</Card:CardView>
32+
</StackLayout>
33+
</Page>
34+
```
35+
36+
### CSS
37+
```CSS
38+
.cardStyle {
39+
background-color: #3489db;
40+
color: #fff;
41+
}
42+
```
43+
44+
45+
## Angular NativeScript
46+
47+
```TS
48+
import * as elementRegistryModule from 'nativescript-angular/element-registry';
49+
elementRegistryModule.registerElement("CardView", () => require("nativescript-cardview").CardView);
50+
```
51+
52+
```XML
53+
<CardView class="cardStyle" margin="10" elevation="40" radius="1" >
54+
<GridLayout rows="10,30,30,250, auto, auto,10" columns="10,40, *, 30,10">
55+
<Image src="res://profile" stretch="aspectFit" verticalAlignment="stretch" col="1" row="1" rowSpan="2"></Image>
56+
<Label class="createdBy text-left" horizontalAlignment="left" [text]="item.CreatedBy" row="1" col="2" textWrap="true"></Label>
57+
<Label class="createdOn text-left" horizontalAlignment="left" [text]="item.UpdatedDate" row="2" col="2"></Label>
58+
<Image [src]="'https://img.youtube.com/vi/'+item.MediaURL+'/mqdefault.jpg'" stretch="aspectFit" colSpan="3" col="1" row="3"></Image>
59+
<Label horizontalAlignment="left" [text]="item.Title" colSpan="3" row="4" textWrap="true" col="1"></Label>
60+
<Label horizontalAlignment="left" [text]="item.Summary" textWrap="true" col="1" row="5" colSpan="3"></Label>
61+
</GridLayout>
62+
</CardView>
63+
```
64+
65+
## Attributes
66+
67+
* **radius** *optional*
68+
69+
An attribute to control the 'border-radius' of the card.
70+
71+
### Platform specific options
72+
73+
#### Android
74+
75+
* **elevation** *optional*
76+
77+
An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card.
78+
There can be some performance impact when using a very high elevation value.
79+
80+
#### iOS
81+
82+
* **shadowOffsetWidth** *optional*
83+
84+
An attribute to offset the x position of the shadow behind the card.
85+
86+
* **shadowOffsetHeight** *optional*
87+
88+
An attribute to offset the y position of the shadow behind the card.
89+
90+
* **shadowColor** *optional*
91+
92+
An attribute to set the color of the shadow behind the card.
93+
94+
* **shadowOpacity** *optional*
95+
96+
An attribute to set the opacity of the shadow behind the card.
97+
98+
The default values are set to:
99+
```
100+
radius = 2;
101+
shadowOffsetWidth = 0;
102+
shadowOffsetHeight = 2;
103+
shadowColor = new Color('#000').ios
104+
shadowOpacity = 0.4;
105+
```
106+
107+
## Sample Screenshots
108+
109+
#### Android
110+
111+
Sample 1 | Sample 2
112+
-------- | ---------
113+
![Sample1](screenshots/sample_card1.png) | ![Sample2](screenshots/sample_card2.png)
114+
115+
116+
#### iOS
117+
118+
Sample 1 | Sample 2
119+
-------- | ---------
120+
![Sample1](screenshots/sample_card1_ios.png) | ![Sample2](screenshots/sample_card3_ios.png)
121+
122+
123+
#### Contributing
124+
[Please follow here](https://github.com/bradmartin/nativescript-cardview/blob/master/CONTRIBUTING.md)
125+
126+
#### Contributors
127+
128+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
129+
| [<img src="https://avatars1.githubusercontent.com/u/6006148?v=3" width="100px;"/><br /><sub>Brad Martin</sub>](https://bradmartin.net/)<br />
130+
| [<img src="https://avatars2.githubusercontent.com/u/457187?v=3" width="100px;"/><br /><sub>Nathan Walker</sub>](https://github.com/NathanWalker)<br />
131+
| [<img src="https://avatars0.githubusercontent.com/u/850871?v=3" width="100px;"/><br /><sub>Nathanael Anderson</sub>](https://github.com/NathanaelA)<br />
132+
| [<img src="https://avatars1.githubusercontent.com/u/7893485?v=3" width="100px;"/><br /><sub>Stanimira Vlaeva</sub>](https://github.com/sis0k0)<br />
133+
| [<img src="https://avatars1.githubusercontent.com/u/1426370?v=3" width="100px;"/><br /><sub>Eddy Verbruggen</sub>](https://github.com/EddyVerbruggen)<br />
134+
<!-- ALL-CONTRIBUTORS-LIST:END -->

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545
"name": "Nathanael Walker",
4646
"email": "nathan.walker@infowrap.com",
4747
"url": "https://github.com/NathanWalker"
48+
},
49+
{
50+
"name": "Ned",
51+
"url": "https://github.com/manijak"
4852
}
4953
],
5054
"author": "Brad Martin <bradwaynemartin@gmail.com> (https://github.com/bradmartin)",

0 commit comments

Comments
 (0)