IONIC中 actionSheetCtrl 和 alertCtrl 的自定义样式

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样式的基础上）                       

扫描二维码关注公众号，回复： 4114306 查看本文章

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;
      }
    }
  }
}