Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nstudio/nativescript-cardview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nstudio/nativescript-cardview

Material Design CardView component for NativeScript

npm install @nstudio/nativescript-cardview

NativeScript prior to 7:

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.

NativeScript Plain

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

XML

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

CSS

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

NativeScript Angular

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>

NativeScript Vue

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>

Attributes

radius optional

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

Platform specific options

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;

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

JSPM