Как создать или настроить представление Toast с использованием рамки 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> 

И с помощью следующего кода:

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 класса, эти изменения будут влиять только на пользовательском модальное и не один по умолчанию.