ionic3 UI Components学习2：Alerts 警报

1.Alerts 警报概述

警报是向用户提供选择特定动作或动作列表的好方法。他们还可以向用户提供重要信息，或要求他们作出决定（或多项决定）。

从用户界面的角度来看，警报可以被认为是一种只覆盖屏幕一部分的“浮动”模式。这意味着警报只能用于快速操作，如密码验证，小应用程序通知或快速选项。更深入的用户流应该保留在全屏模式下。

警报非常灵活，并且可以轻松定制。

2.Basic Alerts 基本警报

基本警报通常用于通知用户有关新信息（应用程序中的更改，新功能等），需要确认的紧急情况或向用户确认操作成功与否的信息。Demo 源代码

import { AlertController } from 'ionic-angular';export class MyPage {constructor(public alertCtrl: AlertController) {}showAlert() {let alert = this.alertCtrl.create({title: 'New Friend!',subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',buttons: ['OK']});alert.present();}
}

3.Prompt Alerts 提示警报

提示提供了一种输入数据或信息的方式。在向前移动应用程序的流程之前，通常会使用提示来询问用户密码。Demo 源代码

import { AlertController } from 'ionic-angular';export class MyPage {constructor(public alertCtrl: AlertController) {}showPrompt() {let prompt = this.alertCtrl.create({title: 'Login',message: "Enter a name for this new album you're so keen on adding",inputs: [{name: 'title',placeholder: 'Title'},],buttons: [{text: 'Cancel',handler: data => {console.log('Cancel clicked');}},{text: 'Save',handler: data => {console.log('Saved clicked');}}]});prompt.present();}
}

4.Confirmation Alerts 确认警报

确认警报用于需要用户在应用程序前进前明确确认特定选项。确认警报的一个常见示例是检查以确保用户想要从其地址簿中删除或删除联系人。Demo 源代码

import { AlertController } from 'ionic-angular';export class MyPage {constructor(public alertCtrl: AlertController) {}showConfirm() {let confirm = this.alertCtrl.create({title: 'Use this lightsaber?',message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',buttons: [{text: 'Disagree',handler: () => {console.log('Disagree clicked');}},{text: 'Agree',handler: () => {console.log('Agree clicked');}}]});confirm.present();}
}

5.Radio Alerts 单选警报

单选警报是一种确认警报，使用单选警报组件提供多种选择。向用户提供一组选项，但只能选择一个选项。Demo 源代码

import { AlertController } from 'ionic-angular';export class MyPage {constructor(public alertCtrl: AlertController) {}showRadio() {let alert = this.alertCtrl.create();alert.setTitle('Lightsaber color');alert.addInput({type: 'radio',label: 'Blue',value: 'blue',checked: true});alert.addButton('Cancel');alert.addButton({text: 'OK',handler: data => {this.testRadioOpen = false;this.testRadioResult = data;}});alert.present();}
}

6.CheckboxAlerts 复选框警报

复选框警报是一种确认警报，使用复选框组件可提供多种选择。它们为用户提供了一系列可供选择的选项。Demo 源代码

import { AlertController } from 'ionic-angular';export class MyPage {constructor(public alertCtrl: AlertController) {}showCheckbox() {let alert = this.alertCtrl.create();alert.setTitle('Which planets have you visited?');alert.addInput({type: 'checkbox',label: 'Alderaan',value: 'value1',checked: true});alert.addInput({type: 'checkbox',label: 'Bespin',value: 'value2'});alert.addButton('Cancel');alert.addButton({text: 'Okay',handler: data => {console.log('Checkbox data:', data);this.testCheckboxOpen = false;this.testCheckboxResult = data;}});alert.present();}
}

7.AlertController API文档

警报是一个对话框，向用户显示信息或使用输入从用户收集信息。警报会显示在应用程序内容的顶部，并且必须先由用户手动解除，然后才能恢复与应用程序的交互。它也可以有一个 title，subTitle和message。

您可以在create方法的第一个参数中传递所有警报的选项：create(opts)。否则，警报的实例会添加方法来添加选项，如setTitle()或addButton()。

7.1 Alert Buttons

在buttons的数组中，每个按钮都包含它的属性text，也可以包含一个handler。如果处理程序返回false，则在点击按钮时不会自动解除警报。所有按钮将按照buttons 从左到右添加到数组的顺序显示。注意：最右边的按钮（数组中的最后一个按钮）是主按钮。

或者，role可以将属性添加到按钮，例如cancel。如果一个cancel角色位于其中一个按钮上，那么如果通过点击背景幕来解除警报，那么它将从具有取消角色的按钮中触发处理程序。

7.2 Alert Inputs

警报还可以包括几个不同的输入，其数据可以传回给应用程序。输入可用作提示用户提供信息的简单方法。Radios, checkboxes 和text 输入都被接受，但不能混用。例如，警报可能包含所有单选按钮输入或所有复选框输入，但同一警报不能混合收音机和复选框输入。不过，别注意，不同类型的“正文”，”输入可以混合使用，如url，email，text，等。如果您需要的不适合的警报那么我们建议构建一个modal 的形式指引的范围内复杂的表单UI代替。

7.3用法

import { AlertController } from 'ionic-angular';constructor(private alertCtrl: AlertController) {}presentAlert() {let alert = this.alertCtrl.create({title: 'Low battery',subTitle: '10% of battery remaining',buttons: ['Dismiss']});alert.present();
}presentConfirm() {let alert = this.alertCtrl.create({title: 'Confirm purchase',message: 'Do you want to buy this book?',buttons: [{text: 'Cancel',role: 'cancel',handler: () => {console.log('Cancel clicked');}},{text: 'Buy',handler: () => {console.log('Buy clicked');}}]});alert.present();
}presentPrompt() {let alert = this.alertCtrl.create({title: 'Login',inputs: [{name: 'username',placeholder: 'Username'},{name: 'password',placeholder: 'Password',type: 'password'}],buttons: [{text: 'Cancel',role: 'cancel',handler: data => {console.log('Cancel clicked');}},{text: 'Login',handler: data => {if (User.isValid(data.username, data.password)) {// logged in!} else {// invalid loginreturn false;}}}]});alert.present();
}

7.4 Instance Members 实例成员

显示带有标题，输入和按钮的警报

7.5 Advanced 高级用法

警报选项

输入选项

按钮选项

7.6 Dismissing And Async Navigation 解除和异步导航

警报解除后，应用程序可能还需要根据处理程序的逻辑过渡到另一个页面。但是，由于多个转换大致同时发生，因此导航控制器难以清晰地动画化可能异步启动的多个转换。这部分将进一步描述 Nav Transition Promises。对于警报，这意味着最好等待警报在同一导航控制器上开始新的转换之前完成其转换。

在下面的例子中，在警告按钮被点击之后，它的处理程序等待异步操作完成，然后它用于pop在同一个堆栈中导航回页面。潜在的问题是异步操作可能在警报甚至完成其转换之前已经完成。在这种情况下，最好确保警报先完成其转换，然后开始下一个转换。

let alert = this.alertCtrl.create({title: 'Hello',buttons: [{text: 'Ok',handler: () => {// user has clicked the alert button// begin the alert's dismiss transitionlet navTransition = alert.dismiss();// start some async methodsomeAsyncOperation().then(() => {// once the async operation has completed// then run the next nav transition after the// first transition has finished animating outnavTransition.then(() => {this.nav.pop();});});return false;}}]
});alert.present();

注意处理程序返回false很重要。按钮处理程序的一个功能是，当按钮被点击时，它们会自动关闭警报，但是，我们需要对转换进行更多控制。因为处理程序返回false，所以警报不会自动关闭。相反，您现在可以完全控制警报何时完成过渡，并且能够在开始新过渡之前等待警报完成过渡。

7.7 Sass Variables 变量

All

iOS和Material Design 的 Sass Variables请点击这里