如何使用 ionic2 框架创建或自定义 Toast 视图

问题描述

我是 ionic2 开发的新手.尝试向用户显示 toast 消息，但是使用 ionic2 框架只能在 toast 视图中显示字符串消息，我想以自定义视图的形式显示图像和一些其他字符串.我该怎么做.

我从 ionic 网站获得了这个链接，上面说我们可以显示字符串.

这个想法是使用 Ionic2 的 ModalController，但使用 ugly 和小的解决方法来修改该模式的样式，而不影响应用程序的其他模式.

当页面显示时(即使它被用作模式页面)，组件的名称用于在 html 代码中的 元素中设置一个类.我们将使用该类来设置模态框的样式，使其看起来像 Toast，但要利用页面来显示其内容，以便我们可以放置图像和其他一些东西.

对于这个演示，我创建了一个带有两个按钮的页面:

<ion-header><离子导航栏><ion-title>ModalController 演示</ion-title></离子导航栏></离子头><离子含量填充><h5>具有自定义大小的模态控制器</h5><button(click)="presentCustomModal()">打开自定义Modal</button><button(click)="presentDefaultModal()">打开默认模态</button></离子含量>

并使用以下代码:

从'@angular/core'导入{组件}；导入 { NavController, ModalController, ViewController } from 'ionic-angular';@零件({templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',})导出类 ModalControllerCustomSizePage {构造函数(私有 navCtrl:NavController，私有 modalCtrl:ModalController){}presentCustomModal() {让 customModal = this.modalCtrl.create(CustomModalPage);customModal.onDidDismiss(() => {//做你想做的...});//呈现模态customModal.present();}presentDefaultModal() {让 defaultModal = this.modalCtrl.create(DefaultModalPage);defaultModal.onDidDismiss(() => {//做你想做的...});//呈现模态defaultModal.present();}}/* ********************自定义模态************************ */@零件({模板:'<离子头>'+'<ion-navbar dark>'+'<ion-title>我的自定义模态</ion-title>'+'<离子按钮结束>'+'<button (click)="dismiss()">关闭</button>'+'</离子按钮>'+'</离子导航栏>'+'</离子头>'+'<离子含量填充>'+'<离子网格>'+'<离子行>'+'<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>'+'</离子行>'+'</离子网格>'+'</离子含量>',})类 CustomModalPage {构造函数(公共 viewCtrl:ViewController){}公开解雇(){this.viewCtrl.dismiss();}}/* ********************默认模态************************ */@零件({模板:'<离子头>'+'<离子导航栏>'+'<ion-title>默认模式</ion-title>'+'<离子按钮结束>'+'<button (click)="dismiss()">关闭</button>'+'</离子按钮>'+'</离子导航栏>'+'</离子头>'+'<离子含量填充>'+'<h5>模态内容...</h5>'+'</离子含量>',})类 DefaultModalPage {构造函数(公共 viewCtrl:ViewController){}公开解雇(){this.viewCtrl.dismiss();}}

请注意，我在同一页面中包含了将用作模式的两个组件的代码，只是为了使代码更易于阅读.推荐的方法是将每个 Component 放在自己的 .ts 文件中.

到目前为止，该代码没有什么特别之处，只是一个打开两个不同(但整页)模式的页面.魔术将通过使用这些样式规则来完成:

.custom-modal-page {高度:270px；位置:绝对；顶部:计算(100% - 270px)；离子含量{背景颜色:#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 视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！