NativeScript Gradient 🎨

以下为 Angular 和 纯XML 示例应用的截图。

安装

tns plugin add nativescript-gradient

使用

由于我们继承自 StackLayout，您可以在任何原本使用 StackLayout 的地方添加 <Gradient>。

除了可以在 StackLayout 上设置的任何属性外，您还应该添加

• colors：至少传递两个颜色值。只需使用您原本会传递给 NativeScript 的 new Color("value") 的值。因此 red、#FF0000、rgb(255, 0, 0)，甚至 rgba(255, 0, 0, 0.5)（《透明度！》）都将正常工作。
• direction：以下之一 "to bottom"、"to top"、"to right"、"to left"、"to bottom left"、"to top left"、"to bottom right"、"to top right"。

Angular

将此内容添加到 app.module.ts 以便在视图中使用 Gradient 标签

import { registerElement } from "nativescript-angular";
registerElement("Gradient", () => require("nativescript-gradient").Gradient);

上述截图中也使用了这些颜色。

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

纯XML

在 Page 标签中导入 Gradient 命名空间并享受颜色！

<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

此插件使用任何第三方库吗？

没有，它轻如鸿毛！

Gradient 标签是什么类型的元素？

它是一个 StackLayout，因此您可以使用所有常规 StackLayout 属性（如 orientation="horizontal" 和 borderRadius="5"） - 并且您可以在任何原本使用 StackLayout 的地方使用 Gradient 标签。

我们可以向此插件传递多少个 colors？

随意，但最小值是两个。