html文件

<ion-header>

  <ion-navbar>
<ion-title>Toast</ion-title>
</ion-navbar> </ion-header> <ion-content padding> <button ion-button block (click)="showToast('bottom')">Show Toast Bottom Position</button>
<button ion-button block (click)="showToast('top')">Show Toast Top Position</button>
<button ion-button block (click)="showToast('middle')">Show Toast Middle Position</button>
<button ion-button block margin-bottom (click)="showLongToast()">Show Long Toast</button> <button ion-button block (click)="showDismissDurationToast()">Show Custom Duration Toast</button>
<button ion-button block (click)="showToastWithCloseButton()">Show Close Button Toast</button> </ion-content>

.ts 文件

import { Component } from '@angular/core';
import { ToastController } from '../../../../../src'; @Component({
templateUrl: 'page-one.html'
})
export class PageOne {
constructor(private toastCtrl: ToastController) { } showToast(position: string) {
const toast = this.toastCtrl.create({
message: 'User was created successfully',
position: position,
duration: 3000
}); toast.onDidDismiss(this.dismissHandler);
toast.present();
} showLongToast() {
const toast = this.toastCtrl.create({
message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
duration: 3000
}); toast.onDidDismiss(this.dismissHandler);
toast.present();
} showDismissDurationToast() {
const toast = this.toastCtrl.create({
message: 'I am dismissed after 1.5 seconds',
duration: 1500
});
toast.onDidDismiss(this.dismissHandler);
toast.present();
} showToastWithCloseButton() {
const toast = this.toastCtrl.create({
message: 'Your internet connection appears to be offline. Data integrity is not guaranteed.',
showCloseButton: true,
closeButtonText: 'Ok'
});
toast.onDidDismiss(this.dismissHandler);
toast.present();
} private dismissHandler() {
console.info('Toast onDidDismiss()');
} }

ionic 提示框的更多相关文章

  1. ionic提示弹框

    //提示框 .factory('TipsPort', function ($ionicPopup) { var TipsPort = function (tipsText, SureFunction, ...

  2. 利用CSS中的:after、: before制作的边三角提示框

    小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...

  3. javascript-模板方法模式-提示框归一化插件

    模板方法模式笔记   父类中定义一组算法操作骨架,而将一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤   实例:弹出框归一化插件 css样式 ;width ...

  4. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  5. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  6. js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

  7. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  8. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  9. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

随机推荐

  1. 使用Vue构建单页应用一

    一. 环境准备 1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本.Node. ...

  2. sql1999语法

    1.交叉连接 cross join 左右两个表进行组合,产生笛卡尔积累. 左边每一行分别于右表每一行数据匹配. 2.using using使用的前提是两个表右关联的字段需要对应,两个表的join查询. ...

  3. oracle整理

    1.安装oracle数据库2.创建数据库实例(可选)3.创建用户.角色.授权(可选) 查询数据库名:select name,dbid from v$database;查询实例名 :select ins ...

  4. JS实现继承 JavaScript

    JS实现继承 JavaScript 定义一个父类: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // ...

  5. day 10 函数的进阶

    动态传参 (重点)  *    ** 形参  * args在形参位置, *表示不定参数--接受的是位置参数   接受到的位置参数的动态传参:  都是元组 形参的顺序: 位置  *args 默认值  * ...

  6. HDFS原理

    1 . NameNode 概述 a. NameNode 是 HDFS 的核心. b. NameNode 也称为 Master. c. NameNode 仅存储 HDFS 的元数据:文件系统中所有文件的 ...

  7. 【NXP开发板应用—智能插排】1.如何使用scp传输文件

    首先感谢深圳市米尔科技有限公司举办的这次活动并予以本人参加这次活动的机会,以往接触过嵌入式,但那都是皮毛,最多刷个系统之类的,可以说对于嵌入式系统开发这件事情是相当非常陌生的,这次活动为我提供了一个非 ...

  8. ajax重定向登录页

    /** * ajax默认设置 * 包括默认提交方式为POST, * 判断后台是否是重定向 */ $.ajaxSetup( { //设置ajax请求结束后的执行动作 complete : functio ...

  9. python学习笔记~INI、REG文件读取函数(自动修复)

    引入configparser,直接read整个INI文件,再调用get即可.但需要注意的是,如果INI文件本身不太规范,就会报各种错,而这又常常不可避免的.本文自定义函数通过try...except. ...

  10. Java8 Comparator 排序方法

    Java8 中 Comparator 接口提供了一些静态方法,可以方便于我们进行排序操作,下面通过例子讲解下如何使用 对整数列表排序(升序) List<Integer> list = Ar ...