檔案目錄結構：

在使用ionic3來寫toast效果時，會有各種各樣對toast樣式的需求，

在全域性的app.scss中新增以下內容

備註：（這裡的樣式也可以放置在元件的scss檔案中，但是是獨立開來的，不要巢狀在元件的page-xxx中去）

//吐司顏色、大小
  .box {
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .toast-container {
    width: 100%;
  }
  .error {
    .toast-message {
      color: #a94442;
    }
    .toast-wrapper {
      background: #f2dede;
      @extend .box;
    }
  }
  .success {
    .toast-message {
      color: #3c763d;
    }
    .toast-wrapper {
      background: #dff0d8;
      @extend .box;
    }
  }
  .tip {
    .toast-message {
      color: #31708f;
    }
    .toast-wrapper {
      background: #d9edf7;
      @extend .box;
    }
  }
  .toast-md .toast-wrapper.toast-top {
    top: 47px;
    height: 33px;
  }
  .toast-md .toast-message {
    display: flex;
    justify-content: center;
    font-size: .8em;
    padding-top: 8px;
  }
 

在使用的元件中新增這一段程式碼：

presentToast(position: string,classstyle: string) {
    const toast = this.toastCtrl.create({
      message: '賬戶或密碼不能為空！',     //需要提示的資訊
      duration: 2000,                   //持續時長
      position: position,               //位置
      showCloseButton: true,            //是否顯示關閉按鈕
      closeButtonText: 'Ok',            //關閉按鈕的文字內容
      cssClass: classstyle              //自定義的樣式
    });
    toast.present();
  }


 this.presentToast("middle","success");  //呼叫方式
 

效果如圖：