第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

Ionic3 修改Actionsheet樣式

標(biāo)簽:
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


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

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

評論

作者其他優(yōu)質(zhì)文章

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

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報(bào)

0/150
提交
取消