Alert

Alert是一个对话框,可以向用户提供信息或者收集用户输入的信息。同样用户必须点击某个按钮才能销毁这个对话框。

和ActionSheet十分相似的是,点击role被设置成cancle的按钮和点击背景所触发的事件是一样的。

  1. constructor(nav: NavController) {
  2. this.nav = nav;
  3. }
  4. presentAlert() {
  5. let alert = Alert.create({
  6. title: 'Low battery',
  7. subTitle: '10% of battery remaining',
  8. buttons: ['Dismiss']
  9. });
  10. this.nav.present(alert);
  11. }
  12. presentConfirm() {
  13. let alert = Alert.create({
  14. title: 'Confirm purchase',
  15. message: 'Do you want to buy this book?',
  16. buttons: [
  17. {
  18. text: 'Cancel',
  19. role: 'cancel',
  20. handler: () => {
  21. console.log('Cancel clicked');
  22. }
  23. },
  24. {
  25. text: 'Buy',
  26. handler: () => {
  27. console.log('Buy clicked');
  28. }
  29. }
  30. ]
  31. });
  32. this.nav.present(alert);
  33. }
  34. presentPrompt() {
  35. let alert = Alert.create({
  36. title: 'Login',
  37. inputs: [
  38. {
  39. name: 'username',
  40. placeholder: 'Username'
  41. },
  42. {
  43. name: 'password',
  44. placeholder: 'Password',
  45. type: 'password'
  46. }
  47. ],
  48. buttons: [
  49. {
  50. text: 'Cancel',
  51. role: 'cancel',
  52. handler: data => {
  53. console.log('Cancel clicked');
  54. }
  55. },
  56. {
  57. text: 'Login',
  58. handler: data => {
  59. if (User.isValid(data.username, data.password)) {
  60. // logged in!
  61. } else {
  62. // invalid login
  63. return false;
  64. }
  65. }
  66. }
  67. ]
  68. });
  69. this.nav.present(alert);
  70. }

静态方法

creat(opts)

Alert选项

属性名称 类型 描述
title string
subTitle string
message string Alert显示的信息
cssClass string
inputs array Alert显示的输入框数组
buttons array
enableBackdropDismiss boolean 点击背景是否销毁Alert

Input选项

属性名称 类型 描述
type string input的类型,例如:text、tel、number等等
name string
placeHolder string input的占位符,未输入时的提示信息。
value string checkbox的值
label string checkbox显示的文字
checked boolean 是否选中
id string input的标识

Button的选项

属性名称 类型 描述
text string
handler any
cssClass string
role string null或者cancel

实例方法

setTitle(title)

  • title stirng

setSubTitle(subTitle)

setMessage(message)

addButton(button)

setCssClass(cssClass)

  • cssClass string

    添加css class 到alert的外层。