A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.
iOS version uses the MaterialCard pod by Nathan Walker
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 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>
.cardStyle {
background-color: #3489db;
color: #fff;
}
- radius optional
An attribute to control the 'border-radius' of the card.
- 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.
- 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.
The default values are set to:
radius = 2;
shadowOffsetWidth = 0;
shadowOffsetHeight = 2;
shadowColor = new Color('#000').ios
shadowOpacity = 0.4;
Sample 1 | Sample 2 |
---|---|
Sample 3 | Sample 4 |
---|---|
Sample 1 | Sample 2 |
---|---|
Sample 3 | Sample 4 |
---|---|