Skip to content
♦️ ♣️ NativeScript widget for Material Design CardView
JavaScript TypeScript CSS HTML Shell Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode clean up Apr 23, 2018
demo-angular fix package scope Jul 17, 2019
demo-vue fix package scope Jul 17, 2019
demo fix package scope Jul 17, 2019
images
publish
src docs Jul 17, 2019
.gitignore demo-vue && demo-angular Mar 11, 2019
.prettierrc update demo Mar 7, 2019
.travis.yml webpack vue Mar 11, 2019
CHANGELOG.md log Jul 17, 2019
CONTRIBUTING.md docs Jul 17, 2019
LICENSE.md docs Jul 17, 2019
README.md docs Jul 17, 2019
tslint.json update demo Mar 7, 2019

README.md

NativeScript CardView

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

npm npm stars build status
nStudio banner

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.


Installation

tns plugin add @nstudio/nativescript-cardview

Be sure to run a new build after adding plugins to avoid any issues. Here is a post with some details: Plugin Not Working after adding to project.


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/element-registry';
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
Sample1 Sample2

iOS

Sample 1 Sample 2
Sample1 Sample2

Run Demo

git clone https://github.com/nstudio/nativescript-cardview.git
cd nativescript-cardview/src && npm run setup

npm run demo.ios

// or...

npm run demo.android

Changelog

Contributing

Contributors

bradmartin NathanWalker manijak NathanaelA EddyVerbruggen sis0k0
bradmartin NathanWalker manijak NathanaelA EddyVerbruggen sis0k0
vladimirnani DickSmith JoffTiquez
vladimirnani DickSmith Jofferson Tiquez
You can’t perform that action at this time.