NativeScript-ProgressBar

一套 XML 小部件，用于在 NativeScript 应用程序中创建原生进度条。

安装

npm install nativescript-progressbar

截图

可用的进度条类型

• CircleProgressBar
• CircleSegmentBar
• ArcProgressBar
• LineProgressBar

用法

CircleProgressBar

<page xmlns:pb="nativescript-progressbar">
    <pb:CircleProgressBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        linearGradient="false"
        width="200"
    />
</page>

CircleSegmentBar

<page xmlns:pb="nativescript-progressbar">
    <pb:CircleSegmentBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        linearGradient="false"
        width="200"
    />
</page>

ArcProgressBar

注意：ArcProgressBar 没有linearGradient属性

<page xmlns:pb="nativescript-progressbar">
    <pb:ArcProgressBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        width="200"
    />
</page>

LineProgressBar

<page xmlns:pb="nativescript-progressbar">
    <pb:LineProgressBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        linearGradient="false"
        width="200"
    />
</page>

属性

Android 备注

• 我们使用 Android-ProgressViewsLib，由 natasam 提供