NativeScript 7 或更高版本

• 使用 @nstudio/nativescript-fancyalert: ~4.0.0
• 源代码管理在此

如果使用 6 及以下版本，请参阅以下内容

为 NativeScript 提供花哨的弹窗。

基于

• iOS SCLAlertView
• Android ColorDialog

安装

NativeScript 4x

tns plugin add nativescript-fancyalert

NativeScript 3x 及更早版本

tns plugin add [email protected]

iOS 规范

使用示例

import { TNSFancyAlert, TNSFancyAlertButton } from "nativescript-fancyalert";

// show success
TNSFancyAlert.showSuccess(
  "Success!",
  "Fancy alerts are nice.",
  "Yes they are!"
);

// set customizations
TNSFancyAlert.showAnimationType =
  TNSFancyAlert.SHOW_ANIMATION_TYPES.SlideInFromLeft;
TNSFancyAlert.hideAnimationType =
  TNSFancyAlert.HIDE_ANIMATION_TYPES.SlideOutToRight;
TNSFancyAlert.backgroundType = TNSFancyAlert.BACKGROUND_TYPES.Blur;
TNSFancyAlert.soundURL = "bell.mp3";
TNSFancyAlert.showSuccess(
  "Sound?",
  "You can use sound and customize many aspects like animation in/out, color, background style and much more.",
  "Amazing!"
);

// show custom image
TNSFancyAlert.showCustomImage(
  "nativescript.png",
  "#2B33FF",
  "Custom Image",
  `Using your own images is sure nice.`,
  "Yes!"
);

// show custom button timer
TNSFancyAlert.showCustomButtonTimer(
  0,
  true,
  undefined,
  undefined,
  "Mission Impossible",
  `This will self-destruct in 5 seconds.`,
  "Ok"
);

// show custom buttons
let buttons = [
  new TNSFancyAlertButton({
    label: "One",
    action: () => {
      console.log("One");
    }
  }),
  new TNSFancyAlertButton({
    label: "Two",
    action: () => {
      console.log("Two");
    }
  }),
  new TNSFancyAlertButton({
    label: "Three",
    action: () => {
      console.log("Three");
    }
  }),
  new TNSFancyAlertButton({
    label: "Four",
    action: () => {
      console.log("Four");
    }
  }),
  new TNSFancyAlertButton({
    label: "Really? More?",
    action: () => {
      console.log("more");
    }
  })
];
TNSFancyAlert.showCustomButtons(
  buttons,
  undefined,
  undefined,
  "Got Buttons?",
  `Add as many as you'd like.`,
  "Ok"
);

// show with custom width
TNSFancyAlert.showSuccess(
  "Success!",
  "This uses a custom width of 300.",
  `Oh that's nice.`,
  0,
  300
);

// show textfield
let initialValue = null;
TNSFancyAlert.showTextField(
  "Enter your name",
  initialValue,
  new TNSFancyAlertButton({
    label: "Save",
    action: (value: any) => {
      console.log(`User entered ${value}`);
    }
  }),
  undefined,
  undefined,
  "User Input?",
  `Yeah, sure we can.`,
  "Ok, lots of options."
);

// show switch
TNSFancyAlert.showSwitch(
  `Don't show again`,
  "#58B136",
  new TNSFancyAlertButton({
    label: "Save",
    action: (isSelected: boolean) => {
      console.log(`Don't show again was selected: ${isSelected}`);
    }
  }),
  "switch.png",
  "#B3714F",
  "Need a switch?",
  `It can be useful.`,
  "Got it."
);

TNSFancyAlert - 属性

TNSFancyAlert - 方法

• showSuccess(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
• showError(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
• showNotice(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
• showWarning(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
• showInfo(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
• showEdit(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
• showWaiting(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• showQuestion(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
• showCustomButtonTimer(buttonIndex: number, reverse?: boolean, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• showCustomImage(imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• showCustomButtons(buttons: Array, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• showCustomTextAttributes(attributionBlock: Function, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• showTextField(placeholder: string, initialValue: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• showSwitch(switchLabel: string, switchColor: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• showCustomView(customView: any, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
• show(type: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array)
• showCustom(alert: any, imageName: string, color: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number)
• createAlert(width?: number)

Android 规范

使用示例

注意：Android 只支持 iOS 功能的一部分，但每个调用都将返回 Promise

import { TNSFancyAlert, TNSFancyAlertButton } from "nativescript-fancyalert";

// show success
TNSFancyAlert.showSuccess(
  "Success!",
  "Fancy alerts are nice.",
  "Yes they are!"
).then(() => {
  /* user pressed the button */
});

// show error
TNSFancyAlert.showError("Error!", "Something bad happened.", "Close").then(
  () => {
    /* user pressed the button */
  }
);

TNSFancyAlert - 方法

• showSuccess(title: string, subTitle?: string, closeBtnTitle?: string): Promise
• showError(title: string, subTitle?: string, closeBtnTitle?: string): Promise
• showNotice(title: string, subTitle?: string, closeBtnTitle?: string): Promise
• showWarning(title: string, subTitle?: string, closeBtnTitle?: string): Promise
• showInfo(title: string, subTitle?: string, closeBtnTitle?: string): Promise

• showColorDialog(
    title: string,
    subTitle?: string,
    okBtnTitle?: string,
    cancelBtnTitle?: string,
    backgroundColor?: string,
    titleTextColor?: string,
    contextTextColor?: string,
    contentImage?: any
  ): Promise<any>```
  

TNSFancyAlertButton (仅限 iOS)

此类可以在 iOS 上实例化，以配置花哨警告中的按钮。

export class TNSFancyAlertButton {
  public label: string;
  public action: Function;
  public applyStyle: (btn: any) => void;

  constructor(model?: any) {
    if (model) {
      this.label = model.label;
      this.action = model.action;
      this.applyStyle = model.applyStyle;
    }
  }
}

• label：按钮上显示的文本
• action：当按钮被点击时调用的方法
• applyStyle：您可以配置此方法以使用 iOS 属性按需样式化按钮。此方法将返回一个继承自 UIButton 的 SLCButton 实例。您可以在 这里 查看此类上可用的更多方法。

以下是如何设置自定义背景颜色的示例

new TNSFancyAlertButton({
  label: 'Ok',
  action: () => {
    // the action to take
  },
  applyStyle: (btn: UIButton) => {
    // we can use UIButton typing when using tns-platform-declarations
    // however we can cast to any since you are likely not using SLCAlertView typings (they are in this repo if you want to use them :) )
    // refer to https://github.com/dogo/SCLAlertView/blob/develop/SCLAlertView/SCLButton.m on what properties are available to customize

    (<any>btn).buttonFormatBlock = () => {
      // set a custom backgroundColor
      return new (NSDictionary as any)([new Color('#3a3939').ios], ['backgroundColor']);
    }
  }
}),

为什么使用 TNS 前缀名称？

TNS 代表 Telerik Native Script

iOS 使用以 NS 前缀的类（源自古老的 NeXTSTEP 时代）：https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

为了避免与 iOS 原生类混淆，使用 TNS。

教程

需要额外的帮助来在您的应用程序中实现这些花哨的警告？请查看这些教程，它们使用了此插件

在 Angular 应用程序中使用 NativeScript 的花哨警告

许可证

MIT