ionic UI组件之alert

北纬的距离

已于 2023-03-15 14:32:01 修改

阅读量96

点赞数 1

文章标签： javascript 前端 angular.js Powered by 金山文档

于 2023-03-15 14:21:24 首次发布

本文链接：https://blog.csdn.net/qq_24909149/article/details/129554025

版权

1.基本用法

基本alert通常用于向用户通知新信息（应用程序中的更改，新功能等），需要确认的紧急情况，或者向用户确认操作是否成功。

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

2.prompt alert

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

import { AlertController } from 'ionic-angular';
export class MyPage {
    constructor(public alertCtrl: AlertController) {

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

3.confirm alert

confirm alert用于需要用户在应用程序前进前确认特定选项。confirm alert的一个常见示例是检查以确保用户想要从他们的地址簿中删除或删除联系人。

import { AlertController } from 'ionic-angular';
export class MyPage {
    constructor(public alertCtrl: AlertController) {
    }
    showConfirm() {
    const 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();
    }
}