0.8.0 • Published 7 years ago
nativescript-radial-gradient v0.8.0
NativeScript Radial Gradient 🎨
Note: This Plugin based on EddyVerbruggen linear gradient plugin.
Installation
tns plugin add nativescript-radial-gradientExample
<Gradientcolors="#FF0077, red, #FF00FF" radius="20" center="{x: 0: y: 0}">
<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>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:
| Param | Description |
|---|---|
| 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. |
| radius | the radius the radial gradient |
| center | the center point the radial gradient {x: number,y: number} |
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-radial-gradient").Gradient);How many colors can we pass to the plugin?
Knock yourself out, but the minimum is two.
Next
- implement radial gradient.
- handel default values better.
Contribute
if you want to help improve the plugin you can consider it yours and make as PRs as you want :)
Get Help
Please, use github issues strictly for reporting bugs or requesting features.
Contact
Twitter: hamdiwanis \ Email: hamdiwanis@hotmail.com
0.8.0
7 years ago