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. iOS开发神器InjectionIII

    最近发现了一款适用于iOS开发的神器,希望可以和大家一起分享,同时自己也将有用的东西记录下来,没错就是InjectionIII! 先看一下使用流程: 1.在MAC的App Store里面搜索下载这个工 ...

  2. 给出一个整数,将这个整数中每位上的数字进行反转(JavaScript编程)

    一.问题描述:给出一个整数,将这个整数中每位上的数字进行反转.示例:输入:123,输出321:输入-123,输出-321:输入120,输出-21 二.问题分析与解决: 需要将给出的整数反转,注意示例中 ...

  3. DW CS5序列号

    先要改host文件,以防止其连接 Adobe 的激活验证服务器 1. 用记事本编辑“C:\Windows\System32\Drivers\etc\”目录下的 hosts 文件, 在末尾加上: 127 ...

  4. chromium之dynamic_annotations

    看看介绍 // This file defines dynamic annotations for use with dynamic analysis // tool such as valgrind ...

  5. JavaScript 时间对象 date()

    getYear() 获得的是距离1900年过了多少年 var d = new Date(); document.write(d+"<br />"); document. ...

  6. Angular.js-2入门

    1.angular与MVC MVC即Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界 ...

  7. JavaScript - 异步的前世今生

    ​ 在开始接触JavaScript的时候,书上有一句话我记忆深刻,JavaScript是一门单线程语言,不管从什么途径去获取这个消息,前端开发者都会记住,哦~~,JavaScript是一门单线程语言, ...

  8. 献给初学者:小白该如何学习Linux操作系统

    一. 选择适合自己的Linux发行版 谈到linux的发行版别,太多了,可能谁也不能给出一个准确的数字,但是有一点是能够必定的,linux正在变得越来越盛行, 面临这么多的Linux 发行版,打算从别 ...

  9. Python图像处理:图像腐蚀与图像膨胀

    图像的膨胀(Dilation)和腐蚀(Erosion)是两种基本的形态学运算,主要用来寻找图像中的极大区域和极小区域.其中膨胀类似于“领域扩张”,将图像中的高亮区域或白色部分进行扩张,其运行结果图比原 ...

  10. JS第一周学习笔记整理

    目录 JS正式课第一周笔记整理 JS正式课第一周笔记整理 webstorm : 代码编辑器 浏览器: 代码解析器: Git : 是一个工具;用于团队协作开发项目管理代码的工具:在工作中用git.svn ...