NativeScript Gradient 🎨
Those are screenshots of the Angular and plain XML demo apps.
Installation
tns plugin add nativescript-gradient
Usage
Since we're subclassing StackLayout
, you can add <Gradient>
to your view at any place where you'd otherwise use a StackLayout
.
In addition to any properties you can already set on a StackLayout
you should add:
colors
: Pass a minimum number of two. Just use thevalue
that you would otherwise pass to NativeScript'snew Color("value")
. Sored
,#FF0000
,rgb(255, 0, 0)
, and evenrgba(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".
Angular
Add this to app.module.ts
so you can use a Gradient
tag in the view:
;registerElement"Gradient",require"nativescript-gradient".Gradient;
These colors are also used in the screenshots above.
Plain XML
Import the 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!
Gradient
tag?
What kind of element is the It's a StackLayout
, so you can use all the regular StackLayout
properties (like orientation="horizontal"
and borderRadius="5"
) - and you can use the Gradient
tag in any spot where you would otherwise use a StackLayout
.
colors
can we pass to the plugin?
How many Knock yourself out, but the minimum is two.