Nativescript + Angular 渐变

为 Nativescript UI 添加渐变的 Angular 指令。

如何使用

• 安装。

tns plugin add nativescript-ng-gradient

• 在您的 App 模块中。

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NSGradientDirectiveModule } from "nativescript-ng-gradient";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  imports: [
    NativeScriptModule,
    NSGradientDirectiveModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }

• 在您的 组件 中。

import { Component } from "@angular/core";
import { Types, Orientation } from "nativescript-ng-gradient";

@Component({
  selector: 'ns-app',
  template: `
    <ActionBar title="Hello"></ActionBar>

    <StackLayout [nsgrad]="gColors" [nsgradType]="gType" [nsgradOrient]="gOrient" [nsgradRadius]="gRadius">
      <Label text="Hello World"></Label>
    </StackLayout>
  `
})
export class AppComponent {
  public gColors = ['#666666', '#eeeeee'];
  public gType = Types.LINEAR_GRADIENT;
  public gOrient = Orientation.LEFT_RIGHT;
  public gRadius = 0;
}

属性

[nsgrad] : 使用可选的颜色数组初始化指令。默认为从黑色到白色的渐变。

[nsgradType] : 指定要使用的渐变类型。默认为 Types.LINEAR_GRADIENT

[nsgradOrient] : 指定渐变的方向。默认为 Orientation.LEFT_RIGHT

[nsgradRadius] : 指定渐变的半径。默认为 0 (无)；

注意

似乎仍然无法使 RADIAL_GRADIENT 正常工作，目前仅在 Android 上支持。

• 以上就是全部内容。无依赖。

许可协议

MIT