Alerts

http://ionicframework.com/docs/v2/components/#alert

Alerts是提供一个选择特定动作或动作列表的好方式。它们可以给用户提供重要的信息，或需要用户做一个选择（或多个选择）。

从UI的观点来说，Alerts可以被认为是一种浮动的只覆盖了一部分屏幕的模态窗口。这意味着Alerts应该只能被用来做一些快速的交互比如密码确认，小提示，或快速选项。更复杂的用户交互应该使用全屏模态窗口Modals。

Alerts是非常灵活的，可以很简单的进行自定义。

更多内容请查看API文档。

基本用法

基本的Alerts是一个典型的提示用户一些信息的通知框（如App的更新，一个新特性等等），或一个重要情况需要用户确认，或作为用户操作是否成功的一个提示。

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(); 
    } 
}

Prompt Alerts

Prompt Alerts提供了一种方式来输入数据或信息。一般情况下这种弹出框被用来要求用户在进行下一步操作之前输入密码。

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();
    }
}

Confirmation Alerts

Confirmation Alerts被用在需要用户在进行下一步操作之前确认选择的时候。一个例子是当用户要从联系人删除一个人的时候需要用户确认删除操作。

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();
    }
}

Radio Alerts

Radio Alerts是一种确认消息框，使用Radio组件来提供几个选择项，但用户只能选择其中一个选项。

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();
    }
}

Checkbox Alerts

Checkbox Alerts是一种确认消息框，使用Checkbox组件提供选择项，用户可以选择多个。

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();
  }
}