ionic2フレームワークを使用してトーストビューを作成またはカスタマイズする方法

Question

ionic2の新機能です。ユーザーにトーストメッセージを表示しようとしていますが、ionic2フレームワークを使用して文字列メッセージのみをトーストビューに表示できるようにするには、イメージとその他の文字列をカスタマイズしたビューの形式で表示する必要があります。どうやってやるの。

このリンクは、私たちが文字列を表示できるというイオンサイトから取得しました。 http://ionicframework.com/docs/v2/api/components/toast/ToastController/

Answer 1

私はこれで遊んでてきた、と私は、回避策を見つけたと思うが、が、これは、回避策そういうことだ、といくつかの他のものは何とか破損するおそれがあること何卒ご了承下さい。

アイデアはIonic2のModalControllerを使用することですが、他のモーダルに影響を与えることなく、そのモーダルのスタイルを変更する醜いと小さな回避策を使用して：

最終結果はこのようなものですアプリ。

ページが表示されている場合（モーダルページとして使用されている場合でも）、コンポーネントの名前は、<ion-page>要素内のHTMLコードのクラスを設定するために使用されます。そのクラスを使用して、トーストのように見えるようにモダールをスタイルしますが、コンテンツ用にページを使用することを利用して、画像やその他のものを置くことができます。

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

し、次のコードを持つ：このデモのために

、私は2つのボタンでページを作成しました

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ファイルに入れることです。

これまでのところ、このコードには特別なものはなく、2つの異なる（フルページの）モーダルを開くページです。マジックは、これらのスタイル規則を使用することによって行われます。

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

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

我々は.custom-modal-pageクラスを使用しているので、それらの変更が唯一のカスタムモーダルではなく、デフォルトの1に影響を与えます。