EddyVerbruggen / nativescript-gradient

:art: Easily add fancy (or subtle) gradient backgrounds to your views
MIT License
54 stars 6 forks source link
gradient nativescript nativescript-plugin

NativeScript Gradient 🎨

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.

Build Status NPM version Downloads Twitter Follow

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:

Angular

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>

Plain XML

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>

Q & A

Does this plugin use any third party libraries?

Nope, it's as light as a feather!

What kind of element is the 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.

How many colors can we pass to the plugin?

Knock yourself out, but the minimum is two.