actionSheetCtrl      

     在IONIC開發中，我們常用到actionSheetCtrl，但是actionSheetCtrl在Android手機中，顯示出來的效果，達不到我們心目中要求，所以我們就需要自己編寫樣式，來控制它的外觀。

   下面是安卓手機和蘋果手機彈框樣式的對照，個人感覺蘋果的彈框樣式好看一些，所有下面是按照蘋果的彈框樣式進行更改的！  特 別 注 意 這 個 樣 式 一 定 要 寫 在 app.css 這個  樣 式 內， 否 則  可 能 無 效  。

 下面是actionSheetCtrl的TS檔案和CSS檔案 

 ts

//定義成全域性的，方便離開本頁面時，將actionSheetCtrl關閉掉
actionSheet: any;

 getPicture() {
 this.actionSheet = this.actionSheetCtrl.create({
        title: 'Select your function',
        cssClass:'ascCss',
        buttons: [
          {
            text: 'Take Photo',
            icon: 'ios-camera-outline',
            role: 'TakePhoto',
            handler: () => {
              console.log('Take Photo clicked');
              //this.takePicture();
            }
          }, {
            text: 'Photo Library',
            icon: 'ios-image-outline',
            role: 'PhotoLibrary',
            handler: () => {
              console.log('Photo Library clicked');
              //this.photoLibrary();
            }
          }, {
            text: 'Cancel',          
            role: 'cancel',         
            handler: () => {
              console.log('Cancel clicked');
            }
          }
        ]
      });

      this.actionSheet.present();   
}

//頁面即將關閉
  ionViewCanLeave() { 
    //關閉頁面時，將actionSheetCtrl關閉掉
    this.actionSheet.dissmiss();
  }
 

 css

.ascCss {
  .action-sheet-group {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    margin-bottom: 5px;

    .action-sheet-title {
      font-size: 1.6rem;
      color: #000;
      background: #fefef9;
      text-align: center;
    }

    .disable-hover {
      border-top: 1px solid #e1dce6;

      .button-inner {
        .icon {
          color:aqua;
        }
      }
    }

    .action-sheet-cancel {
      margin-bottom: 0px;

      .button-inner {
        justify-content: center;
      }
    }
  }

  .action-sheet-group:last-child {
    padding-bottom: 0;
  }
}   
 

    注意：

        除了TS介面 內設定的這個名稱（ cssClass:'ascCss'  ）對應在CSS檔案的,ascCss外 ，注意樣式類（ascCss ）裡面  類的名稱，這裡面的名稱不能亂取，得看你在瀏覽器的HTML頁面中實際  檢查  出來的類名稱

alertCtrl 

   1.單個按鈕

ts

 //提示框提示資訊
  showAlert(message) {
    let alert = this.alertCtrl.create({
      title: "提示",
      message: message,
      buttons: [{
        text: this.translate.instant('ok'),
        handler: () => {

        }
      }]
    });
    alert.present()
  }

css

//單個按鈕
.alert-md .alert-wrapper {
  border-radius: 10px;
}

.alert-md .alert-title {
  font-size: 1.8rem;
  text-align: center;
  margin-top: -10px;
}

.alert-md .alert-button-group {
    padding: 0;
    border-top: 1px solid #e1dce6;
    justify-content: center;
  }

.alert-md .alert-message {
    max-height: 240px;
    font-size: 1.4rem;
    text-align:center;
  }

.alert-md .alert-button {
  width:100%;
  margin:0;
  .button-inner {
    justify-content: center;
  }
}

   2.兩個按鈕（在單個按鈕CSS樣式的基礎上）                       

ts

showConfirm(component) {
    let confirm = this.alertCtrl.create({
      title: 'ARE YOU SURE?',
      cssClass:'twoBtn',
      message: 'Sure to sign out?',
      buttons: [
        {
          text: 'OK',
          handler: () => {
            this.nav.setRoot(component);
          }
        },
        {
          text: 'CANCEL',
          handler: () => {
            console.log('Disagree clicked');
          }
        }
      ]
    });
    confirm.present();
  }

css

//兩個按鈕（在單個按鈕的基礎上）
.twoBtn {
  .alert-wrapper {
    .alert-button-group {
      .alert-button {
        width: 50%;
        border-left: 1px solid #e1dce6;
      }
    }
  }
}