溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

angular4+百分比進度顯示插件用法示例

發(fā)布時間：2020-09-21 21:12:06 來源：腳本之家 閱讀：195 作者：ngsave 欄目：web開發(fā)

本文實例講述了angular4+百分比進度顯示插件用法。分享給大家供大家參考，具體如下：

效果展示：

angular4+百分比進度顯示插件用法示例

一、在npm社區(qū)中搜索 ：

ng-circle-progress

二、在項目目錄下安裝下載

npm install ng-circle-progress --save

三、在app.module.ts文件中導入NgCircleProgressModule模塊，

并在@NgModule裝飾器中使用NgCircleProgressModule.forRoot()的方法,里面的參數(shù)

是個對象字面量

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>

其中參數(shù)有：

選項 類型 默認 描述
percent number 0 您想要顯示的百分比數(shù)
maxPercent number 1000 您想要顯示的最大百分比數(shù)
radius number 90 圓的半徑
clockwise boolean true 是否順時針或逆時針旋轉
showTitle boolean true 是否顯示標題
showSubtitle boolean true 是否顯示字幕
showUnits boolean true 是否顯示單位
showBackground boolean true 是否顯示背景圈
showInnerStroke boolean true 是否顯示內(nèi)部中風
backgroundStroke string 'transparent' 背景描邊顏色
backgroundStrokeWidth number 0 背景圈的筆畫寬度
backgroundPadding number 5 填充的背景圈子
backgroundColor string 'transparent' 背景顏色
backgroundOpacity number 1 背景顏色的不透明度
space number 4 外圈和內(nèi)圈之間的空間
toFixed number 0 在標題中使用固定的數(shù)字符號
renderOnClick boolean true 渲染組件時單擊
units string '%' 單位顯示在標題旁邊
unitsFontSize string '10' 單位的字體大小
unitsColor string '#444444' 單位的字體顏色
outerStrokeWidth number 8 外圈的行程寬度（進度圈）
outerStrokeColor sting '#78C000' 外圈的筆觸顏色
outerStrokeLinecap sting 'round' 外圈的筆畫線條?？赡艿闹担ㄆü?，圓形，方形，繼承）
innerStrokeWidth number 4 內(nèi)圈的行程寬度
innerStrokeColor sting '#C7E596' 內(nèi)圈的筆觸顏色
title string|Array 'auto' 文字顯示為標題。當標題等于'自動'時顯示百分比。
titleFormat Function undefined 一個回調(diào)函數(shù)來格式化標題。它返回一個字符串或一個字符串數(shù)組。
titleColor string '#444444' 標題的字體顏色
titleFontSize string '20' 標題的字體大小
subtitle string|Array 'Percent' 文字顯示為副標題
subtitleFormat Function undefined 一個回調(diào)函數(shù)來格式化字幕。它返回一個字符串或一個字符串數(shù)組。
subtitleColor string '#A9A9A9' 字幕的字體顏色
subtitleFontSize string '10' 字幕的字體大小
animation boolean true 渲染時是否為外部圓圈設置動畫
animateTitle boolean true 是否在渲染時為標題添加動畫
animateSubtitle boolean false 是否在渲染時為字幕添加動畫
animationDuration number 500 動畫持續(xù)時間以微秒為單位
class string '' SVG元素的CSS類名稱 

// 字幕格式回調(diào)示例
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類型的任意值) }}的方式調(diào)用。

更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手