警告框是一个对话框, 通知用户重要信息以做出决定或提供选择特定操作或操作列表的能力。它出现在应用程序内容的顶部。在恢复与应用的交互之前, 用户可以手动将其关闭。它还可以包括标题, 子标题和消息选项。
可以将警告框视为浮动模式, 应将其用于快速响应, 例如密码验证, 小型应用程序通知等。警告框非常灵活, 可以轻松自定义。
警告框控制器 警告框控制器负责在Ionic应用程序中创建警告框。它使用create()方法创建警告框, 并且可以通过在create()方法中传递alert选项进行自定义。
警告框可以分为多种类型, 如下所示。
1.基本警告框
这些类型的警告框用于将新信息通知用户。信息具有不同的类型, 例如应用程序的更改, 有关新功能, 需要确认的紧急情况或作为向用户确认操作成功或失败的确认通知。以下示例说明了基本警告框的用法。
【Ionic警告框】例
在此打字稿文件中, 我们首先需要导入警告框控制器。然后, 创建一个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 =http://www.srcmini.com/> { console.log('Cancel clicked'); } }, { text: 'Save', handler: data =http://www.srcmini.com/> { 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 =http://www.srcmini.com/> { console.log('Cancel clicked'); } }, { text: 'Save', handler: data =http://www.srcmini.com/> { 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 =http://www.srcmini.com/> { console.log('Cancel clicked'); } }, { text: 'Save', handler: data =http://www.srcmini.com/> { 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>

输出：

文章图片

推荐阅读

• 

  微信一笔画完13-5怎么过 微信一笔画完13-5画法路线推荐
• 

  我是一颗太阳花种子
• 

  应用软件分析,手机如何隐藏应用软件
• 

  行人保护装置是怎么保护行人的 行人保护是什么东西
• 

  我好喜欢吃肉，每天都吃肉会引起痛风么？
• 

  抖音看一只蝴蝶从蝉蛹到破茧是什么歌？完整版歌词分享
• 

  如何处理自己的暴脾气，拥有融洽和谐的亲子关系
• 

  2023武汉东湖风景区小学初中对口招生服务范围
• 

  oppo|5G手机不要瞎买！这三款千万别碰，性价比超低
• 

  康熙起居注在线阅读_康熙起居注百度网盘
• 

  椰浆蛋糕的做法
• 

  慢走多久可以达到减肥的效果
• 

  家庭自制蜂蜜怎么保存好些 家庭自制蜂蜜怎么保存好
• 

  血糖仪|救命神器？正在侵入家家户户的血糖仪，真的“稳准”么？
• 

  洗衣机叠放会跑电吗为什么？3种处理方法
• 

  js把分割的字符转换维数组，js根据切割字符串
• 

  歼-16,歼-20,歼-10c三者相比如何呢？
• 

  crm竞品分析,CRM竞品分析报告
• 

  感恩师父的格言
• 

  失落叶的网游三部曲 失落叶所有网游小说顺序排行

• Ionic按钮
• Ionic和AdMob集成
• Ionic上拉菜单
• Ionic 4和Ionic 3之间的区别
• Ionic教程介绍
• IntelliJ Idea和Eclipse之间的区别
• IntelliJ窗口元素
• IntelliJ IDEA版本控制
• IntelliJ IDEA单元测试