1

私はionic2の開発が初めてです。ユーザーにトースト メッセージを表示しようとしていますが、ionic2 フレームワークを使用すると、トースト ビューに文字列メッセージしか表示できません。カスタマイズされたビューの形式で画像と他のいくつかの文字列を表示したいと考えています。どうやってやるの。

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

助言がありますか ？

4

1 に答える 1

1

私はこれをいじっており、回避策を見つけたと思いますが、これは単なる回避策であり、何らかの形で他のものが壊れる可能性があることに注意してください.

最終結果は次のようになります。

ここに画像の説明を入力

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

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

このデモでは、2 つのボタンを含むページを作成しました。

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

コードを読みやすくするために、モーダルとして使用する 2 つのコンポーネントのコードを同じページに含めたことに注意してください。推奨されるアプローチは、すべてComponentを独自の .ts ファイルに入れることです。

これまでのところ、そのコードには特別なことは何もなく、2 つの異なる (ただしフルページの) モーダルを開くページだけです。これらのスタイル ルールを使用すると、魔法が実行されます。

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

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

クラスを使用しているため.custom-modal-page、これらの変更はカスタム モーダルにのみ影響し、デフォルトのモーダルには影響しません。

于 2016-09-11T12:01:46.683 に答える