Intento incluir algunas líneas nuevas en un mensaje de brindis.

    let toast = this.toastCtrl.create({
        message: "First line<br />Second line.",
        duration: 5000,
        dismissOnPageChange: true
    });
    toast.present();

Pero solo muestra las etiquetas. ¿Cómo puedo incluir una nueva línea (y otras etiquetas HTML) en un mensaje de brindis?

2
Michael 13 dic. 2016 a las 11:05

2 respuestas

La mejor respuesta

Necesitaba mostrar un brindis más complejo una vez (con una imagen y algo de texto), y lo hice usando un modal y algunas reglas de estilo. Este es el resultado final:

enter image description here

Lo hice usando Ionic beta en ese momento, pero el código para que funcione en RC debería ser más o menos el mismo:

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

Estilos:

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

    ion-content {
        background-color: #333;
        color: #eee;
    }
}
2
sebaferreras 13 dic. 2016 a las 15:57