ionic 提示框

html文件

<ion-header>

  <ion-navbar>
    <ion-title>Toast</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <button ion-button block (click)="showToast('bottom')">Show Toast Bottom Position</button>
  <button ion-button block (click)="showToast('top')">Show Toast Top Position</button>
  <button ion-button block (click)="showToast('middle')">Show Toast Middle Position</button>
  <button ion-button block margin-bottom (click)="showLongToast()">Show Long Toast</button>

  <button ion-button block (click)="showDismissDurationToast()">Show Custom Duration Toast</button>
  <button ion-button block (click)="showToastWithCloseButton()">Show Close Button Toast</button>

</ion-content>

.ts 文件

import { Component } from '@angular/core';
import { ToastController } from '../../../../../src';

@Component({
  templateUrl: 'page-one.html'
})
export class PageOne {
  constructor(private toastCtrl: ToastController) { }

  showToast(position: string) {
    const toast = this.toastCtrl.create({
      message: 'User was created successfully',
      position: position,
      duration: 3000
    });

    toast.onDidDismiss(this.dismissHandler);
    toast.present();
  }

  showLongToast() {
    const toast = this.toastCtrl.create({
      message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
      duration: 3000
    });

    toast.onDidDismiss(this.dismissHandler);
    toast.present();
  }

  showDismissDurationToast() {
    const toast = this.toastCtrl.create({
      message: 'I am dismissed after 1.5 seconds',
      duration: 1500
    });
    toast.onDidDismiss(this.dismissHandler);
    toast.present();
  }

  showToastWithCloseButton() {
    const toast = this.toastCtrl.create({
      message: 'Your internet connection appears to be offline. Data integrity is not guaranteed.',
      showCloseButton: true,
      closeButtonText: 'Ok'
    });
    toast.onDidDismiss(this.dismissHandler);
    toast.present();
  }

  private dismissHandler() {
    console.info('Toast onDidDismiss()');
  }

}