A NativeScript plugin for Material Design CardView component.
npm install @nstudio/nativescript-cardviewMaterial Design CardView component for NativeScript
``bash`
npm install @nstudio/nativescript-cardview
NativeScript prior to 7:
`bash`
npm install @nstudio/nativescript-cardview@1.0.0
##### Material Design Card Spec
##### CardView Android Documentation
_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_
#### XML
`xml`
#### CSS
`css`
.cardStyle {
background-color: #3489db;
color: #fff;
}
---
`typescript`
import { registerElement } from '@nativescript/angular';
import { CardView } from '@nstudio/nativescript-cardview';
registerElement('CardView', () => CardView);
`html`
stretch="aspectFit"
verticalAlignment="stretch"
col="1"
row="1"
rowSpan="2"
>
class="createdBy text-left"
horizontalAlignment="left"
[text]="item.CreatedBy"
row="1"
col="2"
textWrap="true"
>
class="createdOn text-left"
horizontalAlignment="left"
[text]="item.UpdatedDate"
row="2"
col="2"
>
stretch="aspectFit"
colSpan="3"
col="1"
row="3"
>
horizontalAlignment="left"
[text]="item.Title"
colSpan="3"
row="4"
textWrap="true"
col="1"
>
horizontalAlignment="left"
[text]="item.Summary"
textWrap="true"
col="1"
row="5"
colSpan="3"
>
---
`javascript`
import Vue from 'nativescript-vue';
Vue.registerElement(
'CardView',
() => require('@nstudio/nativescript-cardview').CardView
);
`html`
---
- radius _optional_
An attribute to control the 'border-radius' of the card.
#### 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;
#### Android
| Sample 1 | Sample 2 |
| ----------------------------------- | ----------------------------------- |
| !Sample1 | !Sample2 |
#### iOS
| Sample 1 | Sample 2 |
| --------------------------------------- | --------------------------------------- |
| !Sample1 | !Sample2 |
`bash
git clone https://github.com/nstudio/nativescript-cardview.git
npm run demo.ios
// or...
npm run demo.android
``