A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.

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

Please follow here

• NathanaelA
• NathanWalker