A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.
iOS version uses the MaterialCardView pod by Cem Olcay
npm install nativescript-cardview
IMPORTANT: Make sure you include xmlns:Card="nativescript-cardview" on the Page element
<Page xmlns:Card="nativescript-cardview">
<StackLayout>
<Card:CardView margin="10">
<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" class="clear-btn blue" row="2" col="0" />
<button text="ACCEPT" class="clear-btn blue" row="2" col="1" />
</grid-layout>
</Card:CardView>
</StackLayout>
</Page>Please note: iOS uses default appearance settings and the elevation and radius cannot be set. The backgroundColor can be set though on both platforms (Android/iOS).
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.
radius optional
An attribute to control the 'border-radius' of the card.
backgroundColor optional
This uses the internal backgroundColor stying provided by NativeScript, but I wanted to point out that if you apply this you will lose any elevation and radius property set. This could be enhanced in the future to override the NativeScript styling to use the native method available on the CardView component.
| Sample 1 | Sample 2 |
|---|---|
 |
 |
| Sample 3 | Sample 4 |
|---|---|
 |
 |
| Sample 1 | Sample 2 |
|---|---|
 |
 |
| Sample 3 | Sample 4 |
|---|---|
 |
 |