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/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-1234567span>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;}}}
}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！