@nstudio/nativescript-cardview

Material Design CardView component for NativeScript

``bash
npm install @nstudio/nativescript-cardview
`

NativeScript prior to 7:

`bash
npm install @nstudio/nativescript-cardview@1.0.0
`

##### Material Design Card Spec

##### CardView Android Documentation

Usage

_iOS note: Setting a background-color will help if you do not see the card on the page._

$3

IMPORTANT: _Make sure you include xmlns:Card="@nstudio/nativescript-cardview" on the Page element_

#### XML

`xml












`

#### CSS

`css
.cardStyle {
background-color: #3489db;
color: #fff;
}
`

---

$3

`typescript
import { registerElement } from '@nativescript/angular';
import { CardView } from '@nstudio/nativescript-cardview';
registerElement('CardView', () => CardView);
`

`html


src="res://profile"
stretch="aspectFit"
verticalAlignment="stretch"
col="1"
row="1"
rowSpan="2"
>
class="createdBy text-left"
horizontalAlignment="left"
[text]="item.CreatedBy"
row="1"
col="2"
textWrap="true"
>
class="createdOn text-left"
horizontalAlignment="left"
[text]="item.UpdatedDate"
row="2"
col="2"
>
[src]="'https://img.youtube.com/vi/'+item.MediaURL+'/mqdefault.jpg'"
stretch="aspectFit"
colSpan="3"
col="1"
row="3"
>
horizontalAlignment="left"
[text]="item.Title"
colSpan="3"
row="4"
textWrap="true"
col="1"
>
horizontalAlignment="left"
[text]="item.Summary"
textWrap="true"
col="1"
row="5"
colSpan="3"
>


`

---

$3

`javascript
import Vue from 'nativescript-vue';
Vue.registerElement(
'CardView',
() => require('@nstudio/nativescript-cardview').CardView
);
`

`html





`

---

$3

- radius _optional_

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

$3

#### Android

- elevation _optional_

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

- ripple _optional_

Set to 'true' to show a ripple when the card is tapped. Tap event handlers in the card content will prevent the ripple.

#### iOS

- shadowOffsetWidth _optional_

An attribute to offset the x position of the shadow behind the card.

- shadowOffsetHeight _optional_

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

- shadowColor _optional_

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

- shadowOpacity _optional_

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

- shadowRadius _optional_

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

The default values are set to:

`
radius = 2;
shadowOffsetWidth = 0;
shadowOffsetHeight = 2;
shadowColor = new Color('#000').ios
shadowOpacity = 0.4;
shadowRadius = 1;
`

$3

#### Android

| Sample 1 | Sample 2 |
| ----------------------------------- | ----------------------------------- |
| !Sample1 | !Sample2 |

#### iOS

| Sample 1 | Sample 2 |
| --------------------------------------- | --------------------------------------- |
| !Sample1 | !Sample2 |

Run Demo

`bash
git clone https://github.com/nstudio/nativescript-cardview.git

npm run demo.ios

// or...

npm run demo.android
``

Changelog

Contributing