亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Ionic3 修改Actionsheet樣式

標簽:
Html5

ActionSheetController可以创建一个dialog


https://img1.sycdn.imooc.com//5d5e5603000123a107420680.png


对应的效果图如下,标记的那部分就是一个 dialog


https://img1.sycdn.imooc.com//5d5e56050001875007080837.png

但是有时候这个并不能满足需求,从上图可以看出,button中的字体是靠左边的,假如这时候需要让button中的字体居中该怎么做?其实也很简单,从官方文档中可以发现

https://img1.sycdn.imooc.com//5d5e560b0001a4c107320483.png

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中的字体居中了



作者:spilledyear
链接:https://www.jianshu.com/p/1d8733d901b7


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消