mac下 ionic3 自定义横向进度条渐变色设置

基于此进度条重复使用频率较高可以简单封装一下

1.在根目录下创建组件

$ ionic g component progress-bar(可以随意起名字)创建成功后,会自动导入到components.module文件,如果自定义的组件需要用到ionic的组件,则需要在此引入IonicModule

2.修改html(根据需求修改)直接上代码


3 scss文件


3.1


3.2

4 接下来ts文件(小白一枚垃圾代码有点多欢迎大佬指正)


4.1


4.2


4.3

5 调用

如果调用的页面不是懒加载页面,则在app.module导入

如果调用的页面是懒加载页面,则在页面对应的xxx.module导入


6.在需要用进度条的页面(html)引入


最终效果图 (会有动画效果)

欢迎大佬指正 小白一枚 一起学习!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容