Ionic 进度条

Ionic 进度条组件是一个水平进度条，用于可视化操作和活动的进度。 我们可以通过使用标准的 <ion-progress-bar> 组件来访问 Ionic 进度条。

Ionic 进度条有两种类型，如下所示。

1. 确定型
2. 不确定

确定型进度条

这是一种进度条，当已知操作的百分比时可以使用。 确定型进度条是一种默认的进度条，value 属性表示进度。

示例

以下示例解释了确定型进度条，其中 value 属性表示进度。

输出

当执行上述 Ionic 应用程序时，它将给出以下输出。

不确定型进度条

这是一种进度条，它告诉操作正在进行中。 这意味着无需指示需要多长时间。 如果添加属性 reversed="true"，您将收到一个用于指示预加载的查询。 以下示例更清楚地解释了这一点。

示例

输出

当您运行上述代码段时，它将给出以下输出。 在这里，您将看到两个进度条都以相反的方向动画显示。

Buffer: 它显示 圆圈 作为动画，以指示某些活动。 如果 buffer 属性的值小于 1，则可以显示额外的缓冲进度。 我们可以从以下示例中了解 buffer 属性的用法。

示例

输出

着色进度条

可以通过使用 color 属性来为 <ion-progress-bar> 组件着色。 可以从以下示例中进行解释。

示例

输出

将变量与进度条绑定

我们还可以将进度条与值绑定。 为此，我们需要在方括号中添加 value，这将调用绑定到此 value 属性的变量。 以下示例更清楚地解释了这一点。

示例

home.page.html 文件包含 value 属性，该属性调用绑定到此属性的变量。 相应的逻辑写在 home.page.ts 文件中。

Home.page.html

Home.page.ts

输出

当您执行上述 Ionic 应用程序时，它将给出以下输出。 在这里，您将看到随着值的超过，进度条也将超过。