- Notifications
You must be signed in to change notification settings - Fork48
License
nstudio/nativescript-cardview
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Source management moved tonstudio/nativescript-plugins
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 includexmlns:Card="@nstudio/nativescript-cardview" on the Page element
<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>
.cardStyle {background-color:#3489db;color:#fff;}
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>
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>
- radiusoptional
An attribute to control the 'border-radius' of the card.
- 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.
- 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').iosshadowOpacity = 0.4;shadowRadius = 1;| Sample 1 | Sample 2 |
|---|---|
 |  |
| Sample 1 | Sample 2 |
|---|---|
 |  |
git clone https://github.com/nstudio/nativescript-cardview.gitnpm run demo.ios// or...npm run demo.android
About
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors14
Uh oh!
There was an error while loading.Please reload this page.