PSA: With NativeScript 4.1 this plugin is no longer needed, because linear gradient support is now built-in. Here, have a Tweet about it: https://twitter.com/tjvantoll/status/1004735792474935296. I'm using those in my plugins demo app.
Those are screenshots of the Angular and plain XML demo apps.
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 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 the value
that you would otherwise pass to NativeScript's new Color("value")
. So red
, #FF0000
, 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:
import { registerElement } from "nativescript-angular";
registerElement("Gradient", () => require("nativescript-gradient").Gradient);
These colors are also used in the screenshots above.
<Gradient direction="to right" colors="#FF0077, red, #FF00FF">
<Label class="p-20 c-white" horizontalAlignment="center" text="My gradients are the best." textWrap="true"></Label>
<Label class="p-10 c-white" horizontalAlignment="center" text="It's true." textWrap="true"></Label>
</Gradient>
Import the Gradient
namespace in the Page
tag and enjoy the colors!
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:Gradient="nativescript-gradient" loaded="pageLoaded">
<Gradient:Gradient direction="to right" colors="#FF0077, red, #FF00FF">
<Label text="Such a fancy gradient :)" horizontalAlignment="center"/>
</Gradient:Gradient>
Nope, it's as light as a feather!
Gradient
tag?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?Knock yourself out, but the minimum is two.