NativeScript 7+:

ns plugin add @nstudio/nativescript-cardview

NativeScript prior to 7:

tns plugin add @nstudio/nativescript-cardview@1.0.0

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

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

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

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

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

<CardView class="cardStyle" margin="10" elevation="40" radius="1"> <GridLayout rows="10,30,30,250, auto, auto,10" columns="10,40, *, 30,10"> <image src="res://profile" stretch="aspectFit" verticalAlignment="stretch" col="1" row="1" rowSpan="2" ></image> <label class="createdBy text-left" horizontalAlignment="left" [text]="item.CreatedBy" row="1" col="2" textWrap="true" ></label> <label class="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> <label horizontalAlignment="left" [text]="item.Title" colSpan="3" row="4" textWrap="true" col="1" ></label> <label horizontalAlignment="left" [text]="item.Summary" textWrap="true" col="1" row="5" colSpan="3" ></label> </GridLayout> </CardView>

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

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

• radius optional

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

• 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.

• 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; 

Sample 1	Sample 2

Sample 1	Sample 2

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