NativeScript Gradient 🎨
tns plugin add nativescript-gradient
Since we're subclassing
StackLayout, you can add
<Gradient> to your view at any place where you'd otherwise use a
In addition to any properties you can already set on a
StackLayout you should add:
colors: Pass a minimum number of two. Just use the
valuethat you would otherwise pass to NativeScript's
new Color("value"). So
rgb(255, 0, 0), and even
rgba(255, 0, 0, 0.5)(transparency!) will all work.
direction: One of "to bottom", "to top", "to right", "to left", "to bottom left", "to top left", "to bottom right", "to top right".
Add this to
app.module.ts so you can use a
Gradient tag in the view:
These colors are also used in the screenshots above.
Gradient namespace in the
Page tag and enjoy the colors!
Q & A
Does this plugin use any third party libraries?
Nope, it's as light as a feather!
What kind of element is the
StackLayout, so you can use all the regular
StackLayout properties (like
borderRadius="5") - and you can use the
Gradient tag in any spot where you would otherwise use a
colors can we pass to the plugin?
Knock yourself out, but the minimum is two.