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