相思资源网 Design By www.200059.com

本文实例讲述了angular4+百分比进度显示插件用法。分享给大家供大家参考,具体如下:

效果展示:

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>

其中参数有:

选项 类型 默认 描述 percent number 0 您想要显示的百分比数 maxPercent number 1000 您想要显示的最大百分比数 radius number 90 圆的半径 clockwise boolean true 是否顺时针或逆时针旋转 showTitle boolean true 是否显示标题 showSubtitle boolean true 是否显示字幕 showUnits boolean true 是否显示单位 showBackground boolean true 是否显示背景圈 showInnerStroke boolean true 是否显示内部中风 backgroundStroke string 'transparent' 背景描边颜色 backgroundStrokeWidth number 0 背景圈的笔画宽度 backgroundPadding number 5 填充的背景圈子 backgroundColor string 'transparent' 背景颜色 backgroundOpacity number 1 背景颜色的不透明度 space number 4 外圈和内圈之间的空间 toFixed number 0 在标题中使用固定的数字符号 renderOnClick boolean true 渲染组件时单击 units string '%' 单位显示在标题旁边 unitsFontSize string '10' 单位的字体大小 unitsColor string '#444444' 单位的字体颜色 outerStrokeWidth number 8 外圈的行程宽度(进度圈) outerStrokeColor sting '#78C000' 外圈的笔触颜色 outerStrokeLinecap sting 'round' 外圈的笔画线条。可能的值(屁股,圆形,方形,继承) innerStrokeWidth number 4 内圈的行程宽度 innerStrokeColor sting '#C7E596' 内圈的笔触颜色 title string|Array 'auto' 文字显示为标题。当标题等于'自动'时显示百分比。 titleFormat Function undefined 一个回调函数来格式化标题。它返回一个字符串或一个字符串数组。 titleColor string '#444444' 标题的字体颜色 titleFontSize string '20' 标题的字体大小 subtitle string|Array 'Percent' 文字显示为副标题 subtitleFormat Function undefined 一个回调函数来格式化字幕。它返回一个字符串或一个字符串数组。 subtitleColor string '#A9A9A9' 字幕的字体颜色 subtitleFontSize string '10' 字幕的字体大小 animation boolean true 渲染时是否为外部圆圈设置动画 animateTitle boolean true 是否在渲染时为标题添加动画 animateSubtitle boolean false 是否在渲染时为字幕添加动画 animationDuration number 500 动画持续时间以微秒为单位 class string '' SVG元素的CSS类名称

// 字幕格式回调示例
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程序设计有所帮助。

标签:
angular4+,百分比,进度显示,插件

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“angular4+百分比进度显示插件用法示例”

暂无angular4+百分比进度显示插件用法示例的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。