Ionic3 修改Actionsheet样式
2017-11-14 本文已影响159人
spilledyear
ActionSheetController可以创建一个dialog
![]()
对应的效果图如下,标记的那部分就是一个 dialog
![]()
但是有时候这个并不能满足需求,从上图可以看出,button中的字体是靠左边的,假如这时候需要让button中的字体居中该怎么做?其实也很简单,从官方文档中可以发现
API中提供了一个属性 cssClass , 这个属性的值就是 我们自定义 class 的名字, 多个class之间用空格隔开。其实这个还好,一开始让我很困惑的是,自定义class 应该写到哪里?然后应该以什么形式引入进来吗?还是应该怎么样。我觉得ionic毕竟没有将 css 当作模块来处理,那该怎么引入自定义class样式?
正常情况下,一般就是一个模板文件对应一个样式文件,如果在这里也使用这种方法,也就是将对应的自定义class样式写到该组件对应的scss文件中,那结果可能会让你失望了,并不生效。
正确的做法是将自定义class样式写到app.scss 文件中,这样就可以生效了。不仅仅针对Actionsheet,其它情况也是一样的。以下是主要代码:
//app.scss
.zm-action-button {
.button-inner {
justify-content: center !important;
}
}
//对应的 ts 关键代码
that.actionSheetCtrl.create({
enableBackdropDismiss: true, //点空白处关闭 actionSheetCtrl
buttons: [
{
text: '从相册选择',
cssClass: 'zm-action-button',
handler: () => {
//从相册多选
that.nativeService.getMultiplePicture({
maximumImagesCount: (that.max - that.fileObjList.length),
outputType: 1 //期望返回的图片格式,1图片路径
}).subscribe(imgs => {
for (let img of <string[]>imgs) {
that.getPictureSuccess(img);
}
});
}
},
{
text: '拍照',
cssClass: 'zm-action-button',
handler: () => {
that.nativeService.getPictureByCamera({
destinationType: 1//期望返回的图片格式,1图片路径
}).subscribe(img => {
that.getPictureSuccess(img);
});
}
},
{
text: '取消',
cssClass: 'zm-action-button',
role: 'cancel'
}
]
}).present();
以下是效果图,看标记出,buttton中的字体居中了