ionic 提示框
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 提示框的更多相关文章
- ionic提示弹框
//提示框 .factory('TipsPort', function ($ionicPopup) { var TipsPort = function (tipsText, SureFunction, ...
- 利用CSS中的:after、: before制作的边三角提示框
小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...
- javascript-模板方法模式-提示框归一化插件
模板方法模式笔记 父类中定义一组算法操作骨架,而将一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤 实例:弹出框归一化插件 css样式 ;width ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...
- js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- 自定义iOS 中推送消息 提示框
看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...
随机推荐
- win7下添加库文件出现“file is not regcognized”问题
最近几天需要画电路图,所以安装了protel se99,安装后在添加库文件的时候出现“file is not regcognized”的问题 百度查了一下,说win7基本上都会出现这个问题. 实际上, ...
- Knowledge Point 20180305 补位的两种方式
我们都知道Java的基本数据类型内存中都有一个固定的位数(内存分配空间),如byte占8位,int占32位等.正因如此,当把一个低精度的数据类型转成一个高精度的数据类型时,必然会涉及到如何扩展位数的问 ...
- Struts2-01
一.Struts2的介绍 讲Struts2框架之前,我们需要知道框架是什么呢?估计大多数初学者都只知道其名却不知其意,框架就是一个半成品,别人将一些功能已经写好了,我们只需要拿来用即可,像我们之前使用 ...
- webpack-dev-server 多入口自动刷新,支持对象
万物的来源~webpack 本身 watch webpack watch 传送门 webpack 可以监听文件变化,当它们修改后会重新编译 watch boolean 启用 Watch 模式.这意味着 ...
- 在tornado中使用异步mysql操作
在使用tornado框架进行开发的过程中,发现tornado的mysql数据库操作并不是一步的,造成了所有用户行为的堵塞.tornado本身是一个异步的框架,要求所有的操作都应该是异步的,但是数据库这 ...
- react-router-dom实现全局路由登陆拦截
相比与vue的路由集中式管理,能够很好的进行统一的路由操作,react的路由看起来更乱,想要进行像vue的全局路由管理不是那么得心应手.在我们的项目中,有很多页面是需要登陆权限验证的,最好的方式就是能 ...
- Python提高篇
Python提高篇 1.模块 1)模块定义 模块就是py文件,可以是你自己写的,也可以是python当中自带的工具,当你在某个py文件下想要引用其他模块的功能,就需要你把你把该py文件导入. 2)导入 ...
- windows下nginx的安装
一. 下载 http://nginx.org/ (下载后解压) 二. 修改配置文件 nginx配置文件在 nginx-1.8.0\conf\nginx.conf http { gzip on; ...
- 集合之Map
Map:存放键值对,根据键对象找对应的值对象.键不能重复!Map键不能重复,有唯一性,一般通过键找对应的的值Map集合的特点: 1.具有映射关系 2.两列 3.一列要唯一 一列可以重复 键类似于 Se ...
- Java实例 Part2:Java语言基础
Part2:Java语言基础 ** Example01:从控制台接收输入字符 ** 运行结果: 实现代码: import java.util.Scanner; public class Example ...