One of the most popular mobile user interface components today is the card (a.k.a. CardView).
Individual cards are typically used to display information about a single component or subject in a visually distinctive manner. The Material Design system from Google has become a gold standard for engaging UI, so being able to leverage these components in your NativeScript app is more in demand than ever.
While the NativeScript team (and our community) work towards full Material Design support, it's awfully handy that other folks are starting to fill this gap with a variety of NativeScript plugins. Take for example, the nativescript-cardview plugin from Brad Martin. This plugin implements the Material Design CardView component for both Android and iOS.
🤫 Yes, we will soon have a much bigger announcement around Material Design support in NativeScript!
Show Me Some Code
Like any other NativeScript plugin, you install it with a simple command:
tns plugin add nativescript-cardview
If you are developing a plain JavaScript or plain TypeScript (as opposed to Angular or Vue.js), make sure you add the appropriate namespace to your <Page>
element like so:
<Page xmlns:Card="nativescript-cardview">
Your markup should then include a layout container and the CardView
component. Something like this:
<StackLayout class="p-20">
<Card:CardView>
<StackLayout>
<Label text="Hello World!" />
</StackLayout>
</Card:CardView>
</StackLayout>
TIP: If you're using Angular, you can see some similar sample code here.
This will lead to a UI that looks like:
Wait a minute. Doesn't look so cardy to me. Looks like we need to add some CSS to spice things up. 💃
Let's throw some class
properties on our <CardView>
and <StackLayout>
elements:
<Card:CardView class="cardStyle">
<StackLayout class="cardContent">
And follow it up with the associated styles in our app.css
file:
.page {
background-color: rgb(237, 237, 237);
}
.cardStyle {
background-color: #fff;
color: rgb(43, 43, 43);
}
.cardContent {
padding: 20;
font-weight: bold;
font-size: 30;
}
Alter our text a little and throw a cute kitteh picture in 🐈:
<Label text="Hello Kitteh!" class="m-b-10" />
<Image src="https://placekitten.com/200/200" />
...and we get something that looks like the card UI we were expecting all along!
Custom Attributes
A tricky aspect about the nativescript-cardview plugin is that there are separate unique attributes for both iOS and Android implementations.
You can apply a radius
to an element to customize the border-radius
. (This actually works the same on both platforms).
Shamelessly ripped from the plugin documentation, here are the platform-specific attributes (all are optional):
Android-Specific
elevation
int (consider this the intensity of the "drop shadow" behind the card)
ripple
bool (set this to "true" to show a ripple action when you tap the card)
iOS-Specific
shadowOffsetWidth
int (set the x position of the shadow)
shadowOffsetHeight
int (set the y position of the shadow)
shadowColor
string (set the color of the shadow)
shadowOpacity
int (set the opacity of the shadow)
shadowRadius
int (set the radius of the shadow - different from the radius of the card itself)
{N} Plugins FTW 🔌
You can discover a plugin for virtually any scenario (not to mention app templates and code samples!) on the NativeScript Marketplace.
Top comments (0)