目录
前言
使用ionic开发时,经常会需要我们自己搞一个组件。无论是在ng-zorro还是ionic官网,找到合适的组件并不难,但是按照项目的需求灵活的运用组件难度就大起来了。个人认为,造成这件事最大的客观原因就是英文官网让许许多多的人读不下去。
我个人开发时使用到了Action Sheet,这个控件的样式我调了2天(单指这一个控件) ,虽然花费了不少时间,但是能为以后组件的运用积累经验,还是很值得的。
1.找到自己需要的组件
我在项目中需要实现如下功能,当点击一个按钮,下边栏上弹选项,点击不同的选项,实现不同的功能。在生活中,我使用过这个功能,但是我不知道它的名字是什么,于是我就开始在ionic官网,挨个组件的找。虽然官网会有不少组件,但是找到你需要的组件远没有你想的那么难。
当然,如果各位有更快捷找组件的方式,欢迎在本文下面评论,笔者由衷感谢您的指导与点拨。
(下图来自官网)
2.先抄了再说
Action Sheet控件的详细页面如下。我做的第一步先找到图片演示功能的源码,copy到自己的项目中,尝试运行观察运行效果。https://ionicframework.com/docs/api/action-sheet
官网给出的代码如下(angular)
import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
@Component({
selector: 'action-sheet-example',
templateUrl: 'action-sheet-example.html',
styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {
constructor(public actionSheetController: ActionSheetController) {}
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Albums',
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
}
照葫芦抄下来的效果如下,框架内容和官网一致,但是样式和第一步里的截图有出入。下面的步骤中我们会讨论。
3.对Demo的内容做简单修改
结合上一步代码和运行效果,我们不难把Demo转化为项目。无非是修改一些名称,删除一些边边角角。简单修改后,效果如下
4.切换IOS/Android系统效果
从ios系统的效果图与Android系统的效果图中,我们已经发现了它们之间不一样之处。对于大多数控件,能不能让android系统显示ios系统的效果呢?反之一样。答案当然是可以的。以ActionSheet控件为例,官网上给出了如下说明
具体怎么用呢?
看下效果
5.更改组件样式(一通百通)
主要就是这个效果卡了我两天。这个问题的关键是官网中提供了组件的样式cssClass,但我不知道该把样式写在哪里。
简单来说,具体的实现分两步:
- 第一步:先搞清控件的代码结构,在需要的位置写入cssClass=“自定义的样式名”,
- 第二步:下面的两个文件任选其一,写入具体的样式。为什么要在这里些,因为variables.scss的含义是设置全局的主题信息,global.scss的含义是设置全局的css文件。它们都必须是全局的,因为如果把样式写在其他SCSS目录下,会被官方自己封装的样式覆盖导致无效,只有在全局的样式中才可以。
我们任选一个,在里面写一些代码。
- 我们看下效果图
结语
当功能实现后,我不禁惊呼了出来。因为我发现我可以自定义官方组件的样式了!
笔者技术还不到家,文章就写到这里。感谢观看 !