ionic的Alert弹出框详解
AlertController
警報是一個對話框，向用戶顯示信息或使用輸入收集用戶的信息。 應(yīng)用程式內(nèi)容上方會顯示快訊，使用者必須手動關(guān)閉快訊，才能恢復(fù)與應(yīng)用程式的互動。 它還可以選擇具有標題，子標題和消息。
可以在創(chuàng)建方法的第一個參數(shù)中傳遞所有警報的選項：create（opts）。 否則，警報的實例具有添加選項的方法，例如setTitle（）或addButton（）。
Alert Buttons
在按鈕陣列中，每個按鈕都包含其文本的屬性，以及可選的處理程序。 如果處理程序返回false，那么當單擊按鈕時，該警報將不會自動被關(guān)閉。 所有按鈕將按照從左到右添加到按鈕陣列的順序顯示。 注意：最右邊的按鈕（陣列中的最后一個）是主按鈕。
或者，角色屬性可以添加到按鈕，如取消。 如果其中一個按鈕上有取消角色，則如果通過點擊背景來關(guān)閉警報，則會從具有取消角色的按鈕中觸發(fā)處理程序。
Alert Inputs
alert還可以包括幾個不同的輸入，其數(shù)據(jù)可以傳回應(yīng)用程序。 輸入可以作為提示用戶提供信息的簡單方法。 單選框，復(fù)選框和文本輸入都被接受，但不能混合。 例如，alert可以具有所有單選按鈕輸入或所有復(fù)選框輸入，但相同的alert不能混合單選和復(fù)選框輸入。 但請注意，不同類型的“文本”“輸入可以混合，如URL，電子郵件，文本等。如果您需要一個不符合alert準則的復(fù)雜表單UI，那么我們建議構(gòu)建表單 在一個模態(tài)代替。
Usageimport { AlertController } from 'ionic-angular'; constructor(private alertCtrl: AlertController) { } //alert showalert(){let alert=this.alertCtrl.create({title:"密碼不對",subTitle:"請重新輸入",buttons:["確定"]});alert.present(); } presentConfirm() {//普通彈框let alert = this.alertCtrl.create({title: '確認信息',message: '請確認是否要繼續(xù)？',buttons: [{text: '否',role: 'cancel',handler: () => {console.log('取消繼續(xù)');}},{text: '繼續(xù)',handler: () => {console.log('確認繼續(xù)');}}]});alert.present(); } presentPrompt() {//確認彈框let alert = this.alertCtrl.create({title: '登錄',inputs: [{name: 'username',placeholder: '用戶名'},{name: 'password',placeholder: '密碼',type: 'password'}],buttons: [{text: '取消',role: 'cancel',handler: data => { //data會自動獲取input里面的值console.log('Cancel clicked');}},{text: '登錄',handler: data => {//回調(diào)為假時彈框?qū)⒈３植幌?/span>if (!data.username&&!data.password){console.log("go");console.log(data);// logged in!} else {// invalid loginreturn false;}}}]});alert.present();//切記 } } <p (click)="showalert()">alert普通彈框</p> <p (click)="presentConfirm()">alert確認彈框</p> <p (click)="presentPrompt()">alert提示彈框</p>效果自行運行。
Alert options
屬性 類型 描述
title string 彈框的標題
subTitle string 彈框副標題
message string 彈框顯示內(nèi)容
cssClass string 彈框自定義樣式類名
inputs array 彈框內(nèi)的input（）
buttons array 彈框上的按鈕
enableBackdropDismiss boolean 是否應(yīng)該通過點擊背景來銷毀alert。 默認值為true。
Input options
Property Type Description
type string input 的類型 text, tel, number, etc.
name string The name for the input.
placeholder string The input’s placeholder (for textual/numeric
inputs)
value string The input’s value.
label string The input’s label (only for radio/checkbox inputs)
checked boolean Whether or not the input is checked.
id string The input’s id.
Button options
Property Type Description
text string 按鈕上顯示的字
handler any 點擊按鈕是觸發(fā)執(zhí)行的函數(shù)
cssClass string 自定義樣式類
role string The buttons role, null or cancel.角色
Dismissing And Async Navigation
取消和異步導(dǎo)航
在關(guān)閉alert后，應(yīng)用程序可能還需要根據(jù)處理程序的邏輯轉(zhuǎn)換到另一個頁面。 然而，由于在大致相同的時間觸發(fā)了多個轉(zhuǎn)換，導(dǎo)航控制器很難對多個可能被異步啟動的轉(zhuǎn)換進行動畫生成動畫。 對于alert，這意味著在同一個導(dǎo)航上開啟新的轉(zhuǎn)換之前先等待alert彈框先完成轉(zhuǎn)換。
在下面的示例中，在單擊alert彈框按鈕后，handler 回調(diào)函數(shù)將等待函數(shù)內(nèi)異步操作完成，然后使用pop將頁面返回在同一個頁面堆棧。 潛在的問題是異步加載操作可能在alert轉(zhuǎn)換完成之前完成。（也就說alert轉(zhuǎn)換還沒有完成，異步加載就已經(jīng)完成了） 在這種情況下，最好先確保alert已完成過渡，然后開始下一個轉(zhuǎn)換。
let alert = this.alertCtrl.create({ title: 'Hello', buttons: [{ text: 'Ok', handler: () => { // user has clicked the alert button // begin the alert's dismiss transition let navTransition = alert.dismiss(); // start some async method someAsyncOperation().then(() => { // once the async operation has completed // then run the next nav transition after the // first transition has finished animating out navTransition.then(() => { this.nav.pop(); }); }); return false; } }] }); alert.present();請注意，處理程序返回false。 按鈕處理程序的一個功能是，當他們點擊按鈕時，他們會自動關(guān)閉警報，但是我們需要更多的關(guān)于轉(zhuǎn)換的控制。 因為處理程序返回false，所以警報不會自動關(guān)閉。 相反，您現(xiàn)在可以完全控制警報完成轉(zhuǎn)換的時間，以及在開始新的轉(zhuǎn)換之前等待警報完成轉(zhuǎn)換的能力。
總結(jié)
以上是生活随笔為你收集整理的ionic的Alert弹出框详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言入门
- 下一篇： 超像素分割算法（SLIC）