如何使用ionic2框架創建或定製Toast視圖

Question

我是ionic2開發新手。嘗試向用戶顯示Toast消息，但使用ionic2框架只能在烘烤視圖中顯示字符串消息，我想以自定義視圖的形式顯示圖像和其他幾個字符串。我怎樣才能做到這一點。

我從離子網站得到這個鏈接，說我們可以顯示字符串的。 http://ionicframework.com/docs/v2/api/components/toast/ToastController/

有什麼建議嗎？

Answer 1

我一直在玩弄這一點，我想我找到了一個解決辦法，但請注意，這就是這樣，一個解決方法，並可能導致一些其他的東西以某種方式打破。

最後的結果是這樣的：

的想法是使用Ionic2的ModalController但使用醜陋和小的解決方法來修改樣式模態的，不影響其他情態動詞應用程序。

當頁面顯示時（即使它被用作模態頁面），組件的名稱用於設置html代碼中的<ion-page>元素中的類。我們將使用該類來設計一個模式，使其看起來像一個Toast，但是利用爲其內容使用頁面的優勢，以便我們可以放置圖像和其他一些內容。

在該演示中，我創建了一個頁面有兩個按鈕：

<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> 

並與下面的代碼：

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(); 
    } 
} 

請注意，我包括兩個組件的代碼將在同一頁面中用作模塊，以使代碼更易於閱讀。推薦的方法是將每個Component放在它自己的.ts文件中。

到目前爲止，該代碼沒有什麼特別之處，只是一個打開兩個不同（但全頁）模式的頁面。魔術將使用這些樣式規則來實現：

.custom-modal-page { 
    height: 270px; 
    position: absolute; 
    top: calc(100% - 270px); 

    ion-content { 
     background-color: #333; 
     color: #eee; 
    } 
} 

由於我們使用的.custom-modal-page類，這些變化只會影響自定義模式，而不是默認的。