Ionic警告框

警告框是一个对话框, 通知用户重要信息以做出决定或提供选择特定操作或操作列表的能力。它出现在应用程序内容的顶部。在恢复与应用的交互之前, 用户可以手动将其关闭。它还可以包括标题, 子标题和消息选项。

可以将警告框视为浮动模式, 应将其用于快速响应, 例如密码验证, 小型应用程序通知等。警告框非常灵活, 可以轻松自定义。

警告框控制器

警告框控制器负责在Ionic应用程序中创建警告框。它使用create()方法创建警告框, 并且可以通过在create()方法中传递alert选项进行自定义。

警告框可以分为多种类型, 如下所示。

1.基本警告框

这些类型的警告框用于将新信息通知用户。信息具有不同的类型, 例如应用程序的更改, 有关新功能, 需要确认的紧急情况或作为向用户确认操作成功或失败的确认通知。以下示例说明了基本警告框的用法。

例

在此打字稿文件中, 我们首先需要导入警告框控制器。然后, 创建一个showAlert()函数, 其中包含警告框选项, 例如标题, 子标题, 消息和按钮。之后, 我们创建一个onDidDismiss()方法来恢复与应用程序的交互。

Home.page.ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(public alertCtrl: AlertController) { }

  async showAlert() {
    const alert = await this.alertCtrl.create({
      header: 'Alert', subHeader: 'SubTitle', message: 'This is an alert message', buttons: ['OK']
    });
    await alert.present();
    const result = await alert.onDidDismiss();
    console.log(result);
  }
}

Home.page.html

在这个文件中, 我们将创建一个按钮。当我们按下按钮时, 它将调用showAlert()函数。 showAlert()函数的实现在home.page.ts文件中定义。

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Alert</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <div>
    <ion-button (click)="showAlert()">Basic Alert</ion-button>
  </div>
</ion-content>

输出：

当你运行该应用程序时, 它将显示以下屏幕。当你单击按钮时, 你将立即收到警告框消息。现在, 单击“确定”按钮, 警告框消息将消失。

2.多按钮警告框

此类警告框用于提供多个警告框按钮。它与基本警告框类型相似, 不同之处在于它包含多个按钮而不是单个按钮。在这里, 最右边的按钮用作主按钮。

例

Home.page.ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(public alertCtrl: AlertController) { }
  async showMultipleAlertButtons() {
    const alert = await this.alertCtrl.create({
      header: 'MultipleButtonAlert', subHeader: 'SubTitle', message: 'This is an multiple button alert message', buttons: ['Cancel', 'Save', 'Open']
    });
    await alert.present();
  }
}

Home.page.html

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Alert</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <div>
    <ion-button (click)="showMultipleAlertButtons()" expand="block">Multiple Button Alert</ion-button>
  </div>
</ion-content>

输出：

运行应用程序时, 将获得以下输出。

3.提示警告框

提示警告框用于输入数据或信息。有时, 我们可以使用它在继续前进到应用程序之前向用户询问密码。以下示例对其进行了更清晰的说明。

例

Home.page.ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(public alertCtrl: AlertController) { }

  async showPrompt() {
    const prompt = await this.alertCtrl.create({
      header: 'Album', message: 'Enter a name for this new album', inputs: [
        {
          name: 'name1', type: 'text', placeholder: 'Placeholder 1'
        }, {
          name: 'name2', type: 'text', placeholder: 'Placeholder 2'
        }, ], buttons: [
        {
          text: 'Cancel', handler: data => {
            console.log('Cancel clicked');
          }
        }, {
          text: 'Save', handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    await prompt.present();
  }
}

Home.page.html

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Alert</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <div>
    <ion-button (click)="showPrompt()" expand="block">Prompt Alert</ion-button>
  </div>
</ion-content>

输出：

4.确认警告框

这些类型的警告框用于在前进应用程序之前确认特定的选择。例如, 当用户想要从通讯簿中删除或删除联系人时, 这是必需的。

例

Home.page.ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(public alertCtrl: AlertController) { }
  async showConfirm() {
    const confirm = await this.alertCtrl.create({
      header: 'Confirm!', message: 'Do you agree to use this Alert option', buttons: [
        {
          text: 'Cancel', role: 'cancel', handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Okay', handler: () => {
            console.log('Confirm Okay.');
          }
        }
      ]
    });
    await confirm.present();
  }
}

Home.page.html

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Alert</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <div>
    <ion-button (click)="showConfirm()" expand="block">Confirmation Alert</ion-button>
  </div>
</ion-content>

输出：

5.无线电警告框

无线电警告框与确认警告框类似, 但是建议使用无线电组件代替此组件。这种类型的警告框为用户提供了一组选项, 其中只能选择一个选项。

例

Home.page.ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(public alertCtrl: AlertController) { }
  async showRadio() {
    const alert = await this.alertCtrl.create({
      inputs: [
        {
          name: 'radio 1', type: 'radio', label: 'Green', value: 'green', checked: true, }, {
          name: 'radio 2', type: 'radio', label: 'Black', value: 'black', }, {
          name: 'radio 3', type: 'radio', label: 'Red', value: 'red', }, ], buttons: [
        {
          text: 'Cancel', handler: data => {
            console.log('Cancel clicked');
          }
        }, {
          text: 'Save', handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    await alert.present();
  }
}

Home.page.html

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Alert</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <div>
    <ion-button (click)="showRadio()" expand="block">Radio Alert</ion-button>
  </div>
</ion-content>

输出：

6.复选框警告框

复选框警告框与确认警告框类似, 但是建议使用复选框组件代替它。这种类型的警告框为用户提供了一组多项选择, 用户可以在其中选择其选择的选项。

例

Home.page.ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(public alertCtrl: AlertController) { }
  async showCheckBoxAlert() {
    const alert = await this.alertCtrl.create({
      header: 'What is your favorite Programming Language?', inputs: [
        {
          name: 'checkbox 1', type: 'checkbox', label: 'Java', value: 'Java', checked: true, }, {
          name: 'checkbox 2', type: 'checkbox', label: 'Android', value: 'Android', }, {
          name: 'checkbox 3', type: 'checkbox', label: 'Python', value: 'Python', }, ], buttons: [
        {
          text: 'Cancel', handler: data => {
            console.log('Cancel clicked');
          }
        }, {
          text: 'Save', handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    await alert.present();
  }
}

Home.page.html

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Alert</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <div>
    <ion-button (click)="showCheckBoxAlert()" expand="block">CheckBox Alert</ion-button>
  </div>
</ion-content>

输出：