如何使用ionic2框架创建或自定义Toast视图 [英] How to create or customize a Toast view using ionic2 framework
问题描述
我是ionic2开发的新手。试图向用户显示toast消息，但是使用ionic2框架只能在toast视图中显示字符串消息，我想以自定义视图的形式显示图像和其他一些字符串。我怎么能这样做。
我从离子网站获得了这个链接，表示我们可以显示字符串。
我的想法是使用Ionic2的 ModalController ，但使用丑陋和小的解决方法来修改该模态的样式而不影响应用程序的其他模态。
当显示页面时（即使它用作模态页面），组件的名称用于设置中的类< html代码中的ion-page> 元素。我们将使用该类来设置模式以使其看起来像Toast，但是利用页面来获取它的内容，这样我们就可以放置图像和其他一些东西。
对于这个演示，我创建了一个带有两个按钮的页面：
< ion-header>
< ion-navbar>
< ion-title> ModalController Demo< / ion-title>
< / ion-navbar>
< / ion-header>
< ion-content padding>
< h5>自定义尺寸< / h5>的ModalController
< button（click）=presentCustomModal（）>打开自定义模式< / button>
< button（click）=presentDefaultModal（）>打开默认模式< / button>
< / ion-content>
并使用以下代码：
从'@ angular / core'导入{Component};来自'ionic-angular'的
import {NavController，ModalController，ViewController};
@Component（{
templateUrl：'build / pages / modal-controller-custom-size / modal-controller-custom-size.html'，
}）
export class ModalControllerCustomSizePage {
构造函数（私有navCtrl：NavController，私有modalCtrl：ModalController）{
}
presentCustomModal（）{
let customModal = this.modalCtrl.create（CustomModalPage）;
customModal.onDidDismiss（（）=> {
//做你想做的......
}）;
//提出模态
customModal.present（）;
}
presentDefaultModal（）{
let defaultModal = this.modalCtrl.create（DefaultModalPage）;
defaultModal.onDidDismiss（（）=> {
//做你想做的......
}）;
//呈现模态
defaultModal.present（）;
}
}
/ * ********************
自定义模式
********************* * /
@Component（{
template：'< ion-header>'+
'< ion-navbar dark>'+
'< ion-title>我的自定义模式< / ion-title>'+
'< ion-buttons end>'+
'< button（click）=dismiss（）>关闭< /按钮>'+
'< / ion-buttons>'+
'< / ion- navbar>'+
'< / ion-header>'+
'< ion-content padding>'+
'< ion-grid>'+
' < ion-row>'+
'< ion-col width-50>< img src =http://placehold.it/150x150/>< / ion-col>'+
'< ion-col width-50> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。< / ion-col>'+
'< / ion-row>'+
'< / ion-grid>'+
'< / ion-content>'，
}）
class CustomModalPage {
constructor（public viewCtrl：ViewController）{
}
public dismiss（）{
this.viewCtrl.dismiss（）;
}
}
/ * ********************
默认模式
********************* * /
@Component（{
template：'< ion-header>'+
'< ion-navbar>'+
'< ion-title>默认模态< / ion-title>'+
'< ion-buttons end>'+
'< ;按钮（单击）=解除（）>关闭< /按钮>'+
'< / ion-buttons>'+
'< / ion-navbar>'+
'< / ion-header>'+
'< ion-content padding>'$
'< h5>模态内容......< / h5>'+
'< / ion-content>'，
}）
class DefaultModalPage {
constructor（public viewCtrl：ViewController）{
}
public dismiss（）{
this.viewCtrl.dismiss（）;
}
}
请注意我包含了两个组件的代码它将在同一页面中用作模态，只是为了使代码更容易阅读。建议的方法是将每个 Component 放在自己的.ts文件中。
到目前为止，该代码没什么特别之处，只是一个打开两个不同（但是整页）模态的页面。魔法将通过使用这些样式规则来完成：
.custom-modal-page {
height：270px;
仓位：绝对;
top：calc（100％ - 270px）;
ion-content {
background-color：＃333;
颜色：#eee;
}
}
因为我们使用的是 .custom-modal-page 类，这些更改只会影响自定义模式，而不会影响默认模式。
I am new to ionic2 development. Trying to show a toast message to the user, However using ionic2 framework am able to display only string message's in the toast view, I want to display a image and few other string in the form of customized view. How can i do that.
I got this link from ionic site which says we can display string's. http://ionicframework.com/docs/v2/api/components/toast/ToastController/
Any suggestions ?
I've been playing around with this, and I think I found a workaround, but please notice that this is just that, a workaround, and may cause some other things to break somehow.
The final result is something like this:
The idea is to use Ionic2's ModalController but using an ugly and small workaround to modify the styles of that modal without affecting other modals of the app.
When a page is shown (even though if it's used as a modal page) the Component's name is used to set a class in the <ion-page> element in the html code. We're going to use that class to style a modal to make it look like a Toast, but taking advantage of using a page for it's content so we can put an image and some other things.
For this demo, I've created a page with two buttons:
<ion-header>
<ion-navbar>
<ion-title>ModalController Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h5>ModalController with custom size</h5>
<button (click)="presentCustomModal()">Open Custom Modal</button>
<button (click)="presentDefaultModal()">Open Default Modal</button>
</ion-content>
And with the following code:
import { Component } from '@angular/core';
import { NavController, ModalController, ViewController } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',
})
export class ModalControllerCustomSizePage {
constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
}
presentCustomModal() {
let customModal = this.modalCtrl.create(CustomModalPage);
customModal.onDidDismiss(() => {
// Do what you want ...
});
// Present the modal
customModal.present();
}
presentDefaultModal() {
let defaultModal = this.modalCtrl.create(DefaultModalPage);
defaultModal.onDidDismiss(() => {
// Do what you want ...
});
// Present the modal
defaultModal.present();
}
}
/* ********************
Custom modal
********************* */
@Component({
template: '<ion-header>' +
'<ion-navbar dark>' +
'<ion-title>My custom modal</ion-title>' +
'<ion-buttons end>' +
'<button (click)="dismiss()">Close</button>' +
'</ion-buttons>' +
'</ion-navbar>' +
'</ion-header>' +
'<ion-content padding>' +
'<ion-grid>' +
'<ion-row>' +
'<ion-col width-50><img src="http://placehold.it/150x150"/></ion-col>' +
'<ion-col width-50>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ion-col>' +
'</ion-row>' +
'</ion-grid>' +
'</ion-content>',
})
class CustomModalPage {
constructor(public viewCtrl: ViewController) {
}
public dismiss() {
this.viewCtrl.dismiss();
}
}
/* ********************
Default modal
********************* */
@Component({
template: '<ion-header>' +
'<ion-navbar>' +
'<ion-title>Default modal</ion-title>' +
'<ion-buttons end>' +
'<button (click)="dismiss()">Close</button>' +
'</ion-buttons>' +
'</ion-navbar>' +
'</ion-header>' +
'<ion-content padding>' +
'<h5>Modal content...</h5>' +
'</ion-content>',
})
class DefaultModalPage {
constructor(public viewCtrl: ViewController) {
}
public dismiss() {
this.viewCtrl.dismiss();
}
}
Please notice that I included the code of the two components that are going to be used as modals in the same page, just to make the code easier to read. The recommended approach is to put every Component in its own .ts file.
Until now there's nothing special in that code, is just a page that opens two different (but full-page) modals. The magic will be done by using these style rules:
.custom-modal-page {
height: 270px;
position: absolute;
top: calc(100% - 270px);
ion-content {
background-color: #333;
color: #eee;
}
}
Since we're using the .custom-modal-page class, those changes will only affect the custom modal and not the default one.
这篇关于如何使用ionic2框架创建或自定义Toast视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
