ionic2/ionic3自定义Action Sheets和Alerts组件的样式

最近用ionic2和ionic3中，组件Action Sheets和Alerts给出的基本样式满足不了项目中的设计图的要求，需要修改，在此记录一下方法。
Action Sheets组件
在官网上的例子的样式是如下图所示的：

而需要的样式如下：

具体的实现如下：
我的代码布局如图（红方块圈起来的是重点）：

这个从底部出来的弹窗页面是setting.html页面
重点是：
在ts文件中引入组件：

import { ActionSheetController } from 'ionic-angular';

声明一下：

constructor(public navCtrl: NavController,public actionSheetCtrl: ActionSheetController) {

  }

具体使用Action Sheets组件的方法：

presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: '更换头像',
      cssClass:'headChoice',
      buttons: [
        {
          text: '拍照',
          icon: 'ios-arrow-forward',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: '从相册选择',
          icon: 'ios-arrow-forward',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }

注：其中cssClass是关键，是定义的这个弹窗的class名，可以根据这个class名对弹窗进行样式的自定义，这个class名的使用一定要在app文件夹里面的app.scss里面进行修改，不然不起作用。buttons里面的icon是添加ionic自带的图标的

app.scss文件代码：

//头像选择弹窗
.headChoice{
    .action-sheet-group{
        .action-sheet-title{
            padding: 1rem;
            font-size: 1.8rem;
            color: #000;
            background: #fefef9;
        }
        .disable-hover{
            min-height: auto;
            font-size: 1.6rem;
            color: #000;
            background: #fff;
            position: relative;
            .button-inner{
                justify-content: flex-start;
                position: relative;
                .icon {
                    position: absolute;
                    right: 0;
                    padding-right: 0;
                }
            }
        }
        .action-sheet-cancel{
            background: #fefef9;
            .button-inner{
                justify-content: center;
                font-weight: normal;
            }
        }
    }
}

html代码：

<ion-header>
  <ion-navbar>
    <ion-title>
      个性定制
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="setcontent">
    <div class="toparea">
        <dl>
            <dt (click)="presentActionSheet()">
                <!--<button ion-button outline><img src="assets/img/个人定制a.png"/></button>-->
                <button ion-button outline><img src="assets/img/headperson.png"/></button>
            </dt>
            <dd>上海XX工程咨询有限公司</dd>
        </dl>
    </div>
  <ion-list>
    <ion-item (click)="mySettingClassifyPage()">
        <span class="leftspanArea" item-left><img class="iconleftImg" src="assets/img/classifyicon.png"/></span>
            <ion-label>我关注的项目分类</ion-label>
      <ion-icon name="arrow-forward" item-right class="rightArrow"></ion-icon>
    </ion-item>
    <ion-item (click)="mySettingAreaPage()">
        <span class="leftspanArea" item-left><img class="iconleftImg" src="assets/img/areaicon.png"/></span>
        <ion-label>我关注的项目区域</ion-label>
      <ion-icon name="arrow-forward" item-right class="rightArrow"></ion-icon>
    </ion-item>
  </ion-list>
  <ion-list>
    <ion-item (click)="showbottom()">
        <span class="leftspanArea" item-left><img class="iconleftImg" src="assets/img/friendicon.png"/></span>
        <ion-label>推荐好友</ion-label>
      <ion-icon name="arrow-forward" item-right class="rightArrow"></ion-icon>
    </ion-item>
    <ion-item>
        <span class="leftspanArea" item-left><img class="iconleftImg" src="assets/img/nodisturbicon.png"/></span>
      <ion-label>消息免打扰</ion-label> 
        <ion-toggle checked="false"></ion-toggle> 
    </ion-item>
    <ion-item (click)="mySettingAboutmePage()">
        <span class="leftspanArea" item-left><img class="iconleftImg" src="assets/img/aboutmeicon.png"/></span>
        <ion-label>关于我们</ion-label>
      <ion-icon name="arrow-forward" item-right class="rightArrow"></ion-icon>
    </ion-item>
    <ion-item>
        <span class="leftspanArea" item-left><img class="iconleftImg" src="assets/img/contacticon.png"/></span>
        <ion-label>联系客服</ion-label>
      <span item-right class="phoneNum">010-1234567</span>
    </ion-item>
    <ion-item (click)="mySettingHelpPage()">
        <span class="leftspanArea" item-left><img class="iconleftImg" src="assets/img/helpicon.png"/></span>
        <ion-label>帮助中心</ion-label>
      <ion-icon name="arrow-forward" item-right class="rightArrow"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

scss页面：

page-setting {
//  .toolbar-ios ion-title{
//      padding: 0;  
//      background: #4263e6; 
//      .toolbar-title-ios{
//          color: #fff;
//          font-weight:normal;
//      }
//  }
    .toparea{
        dl{
            margin: 0;
            background: #4263e6; 
            dt{
                text-align: center;
                .button-outline-ios{
                    border-style: none;
                    height: auto;
                    padding:0;
                }
                button{
                    width: 5rem;
                    height: 5rem;
                    margin: 0;
                    .button-inner{
//                      background: #d1d1d1;
//                      border: .3rem solid #fff;
//                      height: 5rem;
                        img{
//                          width: 2.5rem;
//                          height: 2.5rem;
                            width: 5rem;
                            height: 5rem;
                        }
                    }
                }

            }
            dd{
                margin: 0;
                text-align: center;
                color: #fff;
                font-size: 1.7rem;
                padding: 1rem 0 2rem;
            }
        }
    }
    .setcontent{
        background: #f0f0f5;
        .list-ios{
            margin: -1px 0 10px;
        }
        .item{
            border-bottom: 0.55px solid #c8c7cc;
            font-size: 1.5rem;
            .item-inner{
                border-bottom:none;
                .icon{
                    line-height: normal;
                } 
            }
            .leftspanArea{
                margin-right: 5px;
                .iconleftImg{
                    width: 26px;
                }
            }
            .rightArrow{
                color: #b4b4b4;
            }
            .phoneNum{
                color: #3a71dc;
            }
        }
    }
}

ts文件：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SettingClassifyPage } from './setting-classify';
import { SettingAreaPage } from './setting-area';
import { SettingAboutmePage } from './setting-aboutme';
import { SettingHelpPage } from './setting-help';
import { ActionSheetController } from 'ionic-angular';

@Component({
  selector: 'page-setting',
  templateUrl: 'setting.html'
})
export class SettingPage {

  constructor(public navCtrl: NavController,public actionSheetCtrl: ActionSheetController) {

  }

  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: '更换头像',
      cssClass:'headChoice',
      buttons: [
        {
          text: '拍照',
          icon: 'ios-arrow-forward',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: '从相册选择',
          icon: 'ios-arrow-forward',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }

  mySettingClassifyPage(name) { //新增加的按钮单击函数
    this.navCtrl.push(SettingClassifyPage, {name: name});
  }

  mySettingAreaPage(name) { //新增加的按钮单击函数
    this.navCtrl.push(SettingAreaPage, {name: name});
  }

  mySettingAboutmePage(name) { //新增加的按钮单击函数
    this.navCtrl.push(SettingAboutmePage, {name: name});
  }

  mySettingHelpPage(name) { //新增加的按钮单击函数
    this.navCtrl.push(SettingHelpPage, {name: name});
  }
}

Alerts组件：
其实修改如上，直接上代码
效果如图：

ts：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

@Component({
  selector: 'page-setting-classify',
  templateUrl: 'setting-classify.html'
})
export class SettingClassifyPage {

  constructor(public navCtrl: NavController,public alertCtrl: AlertController) {

  }
  showCheckbox() {
    let alert = this.alertCtrl.create({
        cssClass:'projectList',
    });
    alert.setTitle('项目分类列表');

    alert.addInput({
      type: 'checkbox',
      label: '工程勘察',
      value: 'value1'
    });

    alert.addInput({
      type: 'checkbox',
      label: '工程监理',
      value: 'value2'
    });


    alert.addButton('取消');
    alert.addButton({
      text: '关注',
      handler: data => {
        console.log('Checkbox data:', data);
//      this.testCheckboxOpen = false;
//        this.testCheckboxResult = data;
      }
    });
    alert.present();
  }

}

相应的app.scss里面:

//项目分类列表弹窗
.projectList{
    .alert-wrapper{
        border-radius: 3px;
        background: #fff;
        .alert-title{
            font-weight: normal;
        }
        .button-inner{
            position: relative;
            padding:0 10px;
            .alert-checkbox-icon{
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -11px;
                margin-right: 10px;
                border-radius: 0;
            }
            .alert-checkbox-label{
                padding-left: 0;
                border-bottom: 1px solid #dcdcdc;
            }
        }
        .alert-tappable:last-child .alert-checkbox-label{
            border-bottom:0;
        }
        .button-inner{
            color: #8c8c8c;
        }
        .alert-button:last-child{
            font-weight: normal;
            span{
                color: #3a71dc;
            }
        }
    }
}

结束！（回头整理代码上传可供下载）