ionic3安卓平台下actionSheet显示为ios样式效果
在ionic开发中,actionSheet在ios和android两个平台中,显示的效果有很大的区别,我个人更倾向于ios的样式风格.这里我就大概描述下怎么在android平台下也让actionSheet显示出ios的风格样式.
一、在app.css文件里面添加如下样式,记住一定要在app.css里面添加,不然会无效
.action-sheet-md { text-align: center; } .action-sheet-md .action-sheet-container { padding: 0 10px; } .action-sheet-md .action-sheet-group { overflow: hidden; margin-bottom: 8px; border-radius: 13px; background: #f9f9f9; } .action-sheet-md .action-sheet-group:last-child { margin-bottom: 10px; } .action-sheet-md .action-sheet-title { padding: 1.5rem; border-bottom: 0.55px solid #d6d6da; border-radius: 0; font-size: 1.3rem; font-weight: 400; text-align: center; color: #8f8f8f; } .action-sheet-md .action-sheet-button { margin: 0; padding: 18px; min-height: 5.6rem; border-bottom: 0.55px solid #d6d6da; font-size: 1.6rem; color: #007aff; background: transparent; } .action-sheet-md .action-sheet-button:last-child { border-bottom: 0; } .action-sheet-md .action-sheet-button.activated { margin-top: -0.55px; border-top: 5px solid #cccccc; border-bottom-color: #cccccc; background: #ebebeb; } .action-sheet-md .action-sheet-selected { font-weight: bold; background: #fff; } .action-sheet-md .action-sheet-destructive { color: #007aff; } .action-sheet-md .action-sheet-cancel { font-weight: 600; background: #fff; } .action-sheet-md .action-sheet-group:last-child { margin-bottom: 8px; } .action-sheet-md .action-sheet-group:last-child { padding-bottom: 0rem; }
二、actionSheet代码,我这里只是把图片改成null,因为ios的样式本身就没有加图片
/** * 更多选择,actionSheet方法 */ moreSelect() { let actionSheet = this.actionsheetCtrl.create({ cssClass: 'action-sheets-basic-page', buttons: [ { text: '刷新', role: 'destructive', icon: null, handler: () => { this.readData(); //刷新数据 } }, { text: '查询', icon: null, handler: () => { this.navCtrl.push("CollectRecordPage"); } }, { text: '上传', icon: null, handler: () => { } } ] }); actionSheet.present(); }
三、运行效果图如下,发现没有居中,解决方案可参考如下链接:
加上之后效果如下:
至此,在android里面actionSheet显示为ios样式就大功告成了,是不是很简单呢。