https://github.com/eddyverbruggen/nativescript-gradient

:art: Easily add fancy (or subtle) gradient backgrounds to your views
https://github.com/eddyverbruggen/nativescript-gradient

gradient nativescript nativescript-plugin

Last synced: 3 months ago
JSON representation

:art: Easily add fancy (or subtle) gradient backgrounds to your views

• Host: GitHub
• URL: https://github.com/eddyverbruggen/nativescript-gradient
• Owner: EddyVerbruggen
• License: mit
• Created: 2017-06-20T21:25:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-08T13:20:00.000Z (over 6 years ago)
• Last Synced: 2024-10-09T22:24:13.256Z (3 months ago)
• Topics: gradient, nativescript, nativescript-plugin
• Language: TypeScript
• Homepage:
• Size: 2.67 MB
• Stars: 54
• Watchers: 7
• Forks: 6
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/EddyVerbruggen/nativescript-pluginshowcase).

[![Build Status][build-status]][build-url]

[![NPM version][npm-image]][npm-url]

[![Downloads][downloads-image]][npm-url]

[![Twitter Follow][twitter-image]][twitter-url]

[build-status]:https://travis-ci.org/EddyVerbruggen/nativescript-gradient.svg?branch=master

[build-url]:https://travis-ci.org/EddyVerbruggen/nativescript-gradient

[npm-image]:http://img.shields.io/npm/v/nativescript-gradient.svg

[npm-url]:https://npmjs.org/package/nativescript-gradient

[downloads-image]:http://img.shields.io/npm/dm/nativescript-gradient.svg

[twitter-image]:https://img.shields.io/twitter/follow/eddyverbruggen.svg?style=social&label=Follow%20me

[twitter-url]:https://twitter.com/eddyverbruggen

      

_Those are screenshots of the [Angular](https://github.com/EddyVerbruggen/nativescript-gradient/tree/master/demo-ng) and [plain XML](https://github.com/EddyVerbruggen/nativescript-gradient/tree/master/demo) demo apps._

## Installation

```bash

tns plugin add nativescript-gradient

```

## Usage

Since we're subclassing `StackLayout`, you can add `` 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")`](https://docs.nativescript.org/api-reference/classes/_color_.color.html). So `red`, `#FF0000`, `rgb(255, 0, 0)`, and even `rgba(255, 0, 0, 0.5)` ([transparency!](https://github.com/EddyVerbruggen/nativescript-gradient/issues/2)) 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:

```typescript

import { registerElement } from "nativescript-angular";

registerElement("Gradient", () => require("nativescript-gradient").Gradient);

```

These colors are also used in the screenshots above.

```html

  

  

```

### Plain XML

Import the `Gradient` namespace in the `Page` tag and enjoy the colors!

```xml

  

    

  

```

## 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.