angular4+百分比进度显示插件用法示例
(编辑:jimmy 日期: 2024/11/3 浏览:3 次 )
本文实例讲述了angular4+百分比进度显示插件用法。分享给大家供大家参考,具体如下:
效果展示:
一、在npm社区中搜索 :
ng-circle-progress
二、在项目目录下安装下载
npm install ng-circle-progress --save
三、在app.module.ts文件中导入NgCircleProgressModule模块,
并在@NgModule
装饰器中使用NgCircleProgressModule.forRoot()
的方法,里面的参数
是个对象字面量
NgCircleProgressModule.forRoot({ radius: 100, outerStrokeWidth: 16, innerStrokeWidth: 8, outerStrokeColor: "#78C000", innerStrokeColor: "#C7E596", animationDuration: 300 })
四、在app.component.html中导入标签
<circle-progress [percent]="85" [radius]="100" [outerStrokeWidth]="16" [innerStrokeWidth]="8" [outerStrokeColor]="'#78C000'" [innerStrokeColor]="'#C7E596'" [animation]="true" [animationDuration]="300" ></circle-progress>
其中参数有:
// 字幕格式回调示例 formatSubtitle = (percent: number) : string => { if(percent >= 100){ return "Congratulations!" }else if(percent >= 50){ return "Half" }else if(percent > 0){ return "Just began" }else { return "Not started" } }
或者写成以下形式
formatSubtitle (percent: number) : string { if(percent >= 100){ return "Congratulations!" }else if(percent >= 50){ return "Half" }else if(percent > 0){ return "Just began" }else { return "Not started" } }
然后再在html页面以插值表达式{{ formatSubtitle(number类型的任意值) }}
的方式调用。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
下一篇:vuejs数据超出单行显示更多,点击展开剩余数据实例