@nstudio/nativescript-fancyalert

为 NativeScript 提供的精美警报。

基于

• iOS SCLAlertView
• Android ColorDialog

安装

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 属性来按需样式化按钮。此方法将返回一个 SLCButton 实例，该实例继承自 UIButton。您可以在 此处 查看该类上可用的更多方法。

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

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']);
    }
  }
}),

教程

需要在您的应用程序中获取这些精美警报的帮助？请查看这些使用该插件的教程

在 NativeScript with Angular 应用程序中使用精美警报

许可

Apache 许可证版本 2.0，2004 年 1 月