NativeScript plugin to provide gradient layouts. Gradient support is available in NativeScript using CSS but I really like the declarative API of this plugin so I'm going to share :smile:
Screen 1 | Screen 2 |
---|---|
Android | iOS |
---|---|
csdodd/GradientLayout | Evaluating native iOS libs... |
From your command prompt/termial go to your app's root folder and execute:
tns plugin add nativescript-gradient
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:Gradient="nativescript-gradient" loaded="pageLoaded">
<ActionBar title="Gradients" />
<StackLayout height="100%">
<Gradient:Gradient height="50%" startColor="#DA22FF" endColor="#9733EE" orientation="LEFT_RIGHT" id="gradient">
<StackLayout>
<Label text="Left to Right" class="info" textWrap="true" />
<Image src="https://github.com/bradmartin/nativescript-gradient/raw/master/~/images/wonka.jpg" stretch="aspectFit" />
</StackLayout>
</Gradient:Gradient>
<Gradient:Gradient height="50%" startColor="#c2e59c" endColor="#64b3f4" orientation="TL_BR">
<StackLayout>
<Label text="Top Left to Bottom Right" class="info" textWrap="true" />
<Button text="WHATEVER YOU LIKE" tap="gotoMain" height="50" />
</StackLayout>
</Gradient:Gradient>
</StackLayout>
</Page>
startColor - (color string) - required
Attribute to set the starting color of the gradient.
endColor - (color string) - required
Attribute to set the ending color of the gradient.
orientation - (string) - optional --- Default is Top to bottom direction.
These values determine the starting and end of the gradient.