ionic3 UI Components学习2：Alerts 警报

最新推荐文章于 2020-09-25 16:22:16 发布

weixin_33696106

最新推荐文章于 2020-09-25 16:22:16 发布

阅读量257

点赞数

文章标签： ui

原文链接：https://segmentfault.com/a/1190000014515747

版权

1.Alerts 警报概述

警报是向用户提供选择特定动作或动作列表的好方法。他们还可以向用户提供重要信息，或要求他们作出决定（或多项决定）。

从用户界面的角度来看，警报可以被认为是一种只覆盖屏幕一部分的“浮动”模式。这意味着警报只能用于快速操作，如密码验证，小应用程序通知或快速选项。更深入的用户流应该保留在全屏模式下。

警报非常灵活，并且可以轻松定制。

2.Basic Alerts 基本警报

基本警报通常用于通知用户有关新信息（应用程序中的更改，新功能等），需要确认的紧急情况或向用户确认操作成功与否的信息。Demo 源代码
图片描述

图片描述

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }
}

3.Prompt Alerts 提示警报

提示提供了一种输入数据或信息的方式。在向前移动应用程序的流程之前，通常会使用提示来询问用户密码。Demo 源代码
图片描述

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

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

4.Confirmation Alerts 确认警报

确认警报用于需要用户在应用程序前进前明确确认特定选项。确认警报的一个常见示例是检查以确保用户想要从其地址簿中删除或删除联系人。Demo 源代码
图片描述

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showConfirm() {
    let 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();
  }
}

5.Radio Alerts 单选警报

单选警报是一种确认警报，使用单选警报组件提供多种选择。向用户提供一组选项，但只能选择一个选项。Demo 源代码
图片描述

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showRadio() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Lightsaber color');

    alert.addInput({
      type: 'radio',
      label: 'Blue',
      value: 'blue',
      checked: true
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        this.testRadioOpen = false;
        this.testRadioResult = data;
      }
    });
    alert.present();
  }
}

6.CheckboxAlerts 复选框警报

复选框警报是一种确认警报，使用复选框组件可提供多种选择。它们为用户提供了一系列可供选择的选项。Demo 源代码
图片描述

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showCheckbox() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Which planets have you visited?');

    alert.addInput({
      type: 'checkbox',
      label: 'Alderaan',
      value: 'value1',
      checked: true
    });

    alert.addInput({
      type: 'checkbox',
      label: 'Bespin',
      value: 'value2'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Okay',
      handler: data => {
        console.log('Checkbox data:', data);
        this.testCheckboxOpen = false;
        this.testCheckboxResult = data;
      }
    });
    alert.present();
  }
}

7.AlertController API文档

警报是一个对话框，向用户显示信息或使用输入从用户收集信息。警报会显示在应用程序内容的顶部，并且必须先由用户手动解除，然后才能恢复与应用程序的交互。它也可以有一个 title，subTitle和message。

您可以在create方法的第一个参数中传递所有警报的选项：create(opts)。否则，警报的实例会添加方法来添加选项，如setTitle()或addButton()。

7.1 Alert Buttons

在buttons的数组中，每个按钮都包含它的属性text，也可以包含一个handler。如果处理程序返回false，则在点击按钮时不会自动解除警报。所有按钮将按照buttons 从左到右添加到数组的顺序显示。注意：最右边的按钮（数组中的最后一个按钮）是主按钮。

或者，role可以将属性添加到按钮，例如cancel。如果一个cancel角色位于其中一个按钮上，那么如果通过点击背景幕来解除警报，那么它将从具有取消角色的按钮中触发处理程序。

7.2 Alert Inputs

警报还可以包括几个不同的输入，其数据可以传回给应用程序。输入可用作提示用户提供信息的简单方法。Radios, checkboxes 和text 输入都被接受，但不能混用。例如，警报可能包含所有单选按钮输入或所有复选框输入，但同一警报不能混合收音机和复选框输入。不过，别注意，不同类型的“正文”，”输入可以混合使用，如url，email，text，等。如果您需要的不适合的警报那么我们建议构建一个modal 的形式指引的范围内复杂的表单UI代替。

7.3用法

import { AlertController } from 'ionic-angular';

constructor(private alertCtrl: AlertController) {

}

presentAlert() {
  let alert = this.alertCtrl.create({
    title: 'Low battery',
    subTitle: '10% of battery remaining',
    buttons: ['Dismiss']
  });
  alert.present();
}

presentConfirm() {
  let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });
  alert.present();
}

presentPrompt() {
  let alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'username',
        placeholder: 'Username'
      },
      {
        name: 'password',
        placeholder: 'Password',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Login',
        handler: data => {
          if (User.isValid(data.username, data.password)) {
            // logged in!
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();
}

7.4 Instance Members 实例成员

显示带有标题，输入和按钮的警报

Param	Type	Details
opts	AlertOptions	A警报。见下表

7.5 Advanced 高级用法

警报选项

Property	Type	Description
title	string	警报的标题。
subTitle	string	警报的副标题。
message	string	警报消息。
cssClass	string	自定义样式的其他类，以空格分隔。
inputs	array	警报的输入数组。请参阅输入选项。
buttons	array	警报的一组按钮。看按钮选项。
enableBackdropDismiss	boolean	是否应该通过点击背景来解除警报。默认为true。

输入选项

Property	Type	Description
type	string	输入的类型应该是：text，tel，number等。
name	string	输入的名称。
placeholder	string	输入的占位符（用于文本/数字输入）
value	string	输入的值。
label	string	输入的标签（仅用于单选/复选框输入）
checked	boolean	是否检查输入。
id	string	输入的ID。

按钮选项

Property	Type	Description
text	string	按钮显示的文本。
handler	any	按下按钮时执行的方法
cssClass	string	该按钮的附加CSS类。
role	string	按钮角色，null或cancel。

7.6 Dismissing And Async Navigation 解除和异步导航

警报解除后，应用程序可能还需要根据处理程序的逻辑过渡到另一个页面。但是，由于多个转换大致同时发生，因此导航控制器难以清晰地动画化可能异步启动的多个转换。这部分将进一步描述 Nav Transition Promises。对于警报，这意味着最好等待警报在同一导航控制器上开始新的转换之前完成其转换。

在下面的例子中，在警告按钮被点击之后，它的处理程序等待异步操作完成，然后它用于pop在同一个堆栈中导航回页面。潜在的问题是异步操作可能在警报甚至完成其转换之前已经完成。在这种情况下，最好确保警报先完成其转换，然后开始下一个转换。

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很重要。按钮处理程序的一个功能是，当按钮被点击时，它们会自动关闭警报，但是，我们需要对转换进行更多控制。因为处理程序返回false，所以警报不会自动关闭。相反，您现在可以完全控制警报何时完成过渡，并且能够在开始新过渡之前等待警报完成过渡。

7.7 Sass Variables 变量

All

Property	Default	Description
$alert-min-width	250px	警报的最小宽度
$alert-max-height	90%	警报的最大高度
$alert-button-line-height	20px	警报按钮的行高
$alert-button-font-size	14px	警报按钮的字体大小
$alert-input-placeholder-color	#999	警报输入占位符的颜色

iOS和Material Design 的 Sass Variables请点击这里

weixin_33696106

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫