Nativescript-Number-ProgressBar

NativeScript Number ProgressBar 提供带样式的简单进度条。欢迎反馈和PR。

演示

| ---------- | |

原生库

安装

从您的命令提示符/终端转到您的应用根目录并执行

npm i nativescript-number-progressbar --save

用法

XML

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:NumberProgressBar="nativescript-number-progressbar" loaded="pageLoaded"> 
    <Page.actionBar>
      <ActionBar title="Nativescript Number ProgressBar" />
  </Page.actionBar>
  <StackLayout padding="10">
      <NumberProgressBar:NumberProgressBar  id="sb" marginTop="20" />
        <NumberProgressBar:NumberProgressBar  id="sb1" marginTop="30"  progress_text_size="30" progress_text_color="#2BAB42" progress_unreached_bar_height="5" progress_reached_bar_height="10" progress_unreached_color="#ededed" progress_reached_color="#2BAB42" />
       <NumberProgressBar:NumberProgressBar  id="sb2" marginTop="30"  progress_text_size="40" progress_text_color="#F0D812" progress_unreached_bar_height="10" progress_reached_bar_height="20" progress_unreached_color="#ededed" progress_reached_color="#F0D812"  />
       <NumberProgressBar:NumberProgressBar  id="sb3" marginTop="30"  progress_text_size="50" progress_text_color="#F43B5A" progress_unreached_bar_height="20" progress_reached_bar_height="40" progress_unreached_color="#ededed" progress_reached_color="#F43B5A"  />
       <NumberProgressBar:NumberProgressBar  id="sb4" marginTop="30"  progress_text_size="60" progress_text_color="#D726EC" progress_unreached_bar_height="20" progress_reached_bar_height="40" progress_unreached_color="#34EC1A" progress_reached_color="#D726EC"  />

        
  </StackLayout>
</Page>

TS

import {NumberProgressBar} from 'nativescript-number-progressbar';
private npb: NumberProgressBar;
this.npb = <NumberProgressBar>mainPage.getViewById('sb');
this.npb.incrementProgressBy(1);

属性

您可以根据需要设置几个属性

已到达区域和未到达区域

• 颜色
• 高度

文本区域

• 颜色
• 字体大小
• 可见性
• 已到达区域和未到达区域之间的距离

进度条

• 最大进度
• 当前进度

progress_text_size - (int) - 可选

指定进度条中文本大小的属性。

progress_text_color - (color string) - 可选

指定进度条中文本颜色的属性。

progress_unreached_color - (color string) - 可选

指定进度条未到达区域颜色的属性。

progress_reached_color - (color string) - 可选

指定进度条已到达区域颜色的属性。

progress_unreached_bar_height - (int) - 可选

指定未到达进度条高度的属性。

progress_reached_bar_height - (int) - 可选

指定已到达进度条高度的属性。

方法

incrementProgressBy(int)

以任何值增加进度条。

getProgress()

在某一时刻了解当前进度条值。

setProgress(int)

设置进度条值。

getProgressMax()

了解进度条最大值。

setProgressMax(int)

设置进度条最大值。