Source management moved to nstudio/nativescript-plugins

---

NativeScript CardView

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

---

Installation

NativeScript 7+:

ns plugin add @nstudio/nativescript-cardview

NativeScript prior to 7:

tns plugin add @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.

NativeScript Plain

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

XML

<Pagexmlns:Card="@nstudio/nativescript-cardview">
<StackLayout>
<Card:CardViewclass="cardStyle"margin="10"elevation="40"radius="5">
<grid-layoutrows="200, auto, auto"columns="auto, auto, *">
<imagesrc="~/images/batman.jpg"stretch="aspectFill"colSpan="3"row="0" />
<labeltext="Batman wants to be friends?"class="info"textWrap="true"row="1"colSpan="3" />
<buttontext="DECLINE"tap="goAway"row="2"col="0" />
<buttontext="ACCEPT"row="2"col="1" />
</grid-layout>
</Card:CardView>
</StackLayout>
</Page>

CSS

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

---

NativeScript Angular

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

<CardViewclass="cardStyle" margin="10" elevation="40" radius="1"><GridLayoutrows="10,30,30,250, auto, auto,10" columns="10,40, *, 30,10"><imagesrc="res://profile"
stretch="aspectFit"
verticalAlignment="stretch"
col="1"
row="1"
rowSpan="2"
></image><labelclass="createdBy text-left"
horizontalAlignment="left"
[text]="item.CreatedBy"
row="1"
col="2"
textWrap="true"
></label><labelclass="createdOn text-left"
horizontalAlignment="left"
[text]="item.UpdatedDate"
row="2"
col="2"
></label><image[src]="'https://img.youtube.com/vi/'+item.MediaURL+'/mqdefault.jpg'"
stretch="aspectFit"
colSpan="3"
col="1"
row="3"
></image><labelhorizontalAlignment="left"
[text]="item.Title"
colSpan="3"
row="4"
textWrap="true"
col="1"
></label><labelhorizontalAlignment="left"
[text]="item.Summary"
textWrap="true"
col="1"
row="5"
colSpan="3"
></label></GridLayout></CardView>

---

NativeScript Vue

importVuefrom'nativescript-vue';Vue.registerElement('CardView',()=>require('@nstudio/nativescript-cardview').CardView);

<card-viewmargin="10" elevation="40" radius="1"><stack-layout><labeltext="Hello World"></label></stack-layout></card-view>

---

Attributes

• radiusoptional

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

Platform specific options

Android

• elevationoptional

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.

• rippleoptional

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

iOS

• shadowOffsetWidthoptional

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

• shadowOffsetHeightoptional

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

• shadowColoroptional

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

• shadowOpacityoptional

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

• shadowRadiusoptional

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;

Sample Screenshots

Android

Sample 1	Sample 2

iOS

Sample 1	Sample 2

Run Demo

git clone https://github.com/nstudio/nativescript-cardview.git
npm run demo.ios
// or...
npm run demo.android

Changelog

Contributing