Ionic进度条

本文概述

• 确定进度栏
• 不确定进度条
• 着色进度条
• 与进度栏绑定变量

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

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

1. 某些
2. 不定

确定进度栏

它是一种进度条, 在知道某项操作的百分比时可以使用。确定进度条是默认进度条的一种, value属性表示进度。

例

以下示例说明了确定的进度条, 其中value属性表示进度。

<ion-header>
    <ion-toolbar color="light">
      <ion-title>Ionic Progress Bar</ion-title>
    </ion-toolbar>
  </ion-header>
  
<ion-content fullscreen class="ion-padding">
  <p>Default Progress Bar</p>
  <ion-progress-bar></ion-progress-bar>

  <br>

  <p>Default Progress Bar with 50 percent</p>
  <ion-progress-bar value="0.5"></ion-progress-bar>
</ion-content>

输出：

执行上述Ionic应用程序后, 将提供以下输出。

不确定进度条

它是一种进度条, 指示操作正在进行中。这意味着无需指明将花费多长时间。如果添加属性reversed =“ true”, 则会收到用于指示预加载的查询。以下示例对其进行了更清晰的说明。

例

<ion-header>
    <ion-toolbar color="light">
      <ion-title>Ionic Progress Bar</ion-title>
    </ion-toolbar>
  </ion-header>
  
<ion-content fullscreen class="ion-padding">
  <p>Indeterminate Progress Bar</p>
  <ion-progress-bar type="indeterminate"></ion-progress-bar>
  <br>
  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
</ion-content>

输出：

当你运行以上代码片段时, 将提供以下输出。在这里, 你将看到两个进度条都朝相反的方向动画。

缓冲区：它将圆圈显示为动画, 以指示某些活动。如果buffer属性的值小于1, 则可以显示其他缓冲进度。我们可以从以下示例中了解缓冲区属性的使用。

例

<ion-header>
    <ion-toolbar color="light">
      <ion-title>Ionic Progress Bar</ion-title>
    </ion-toolbar>
  </ion-header>
  
<ion-content fullscreen class="ion-padding">
  <p>Default Progress Bar</p>
  <ion-progress-bar value="0.25"></ion-progress-bar>
  <br>
  <p>Buffer Progress Bar</p>
  <ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
</ion-content>

输出：

着色进度条

可以使用颜色属性对<ion-progress-bar>组件进行着色。可以从以下示例中进行解释。

例

<ion-header>
    <ion-toolbar color="light">
      <ion-title>Ionic Progress Bar</ion-title>
    </ion-toolbar>
  </ion-header>
  
<ion-content fullscreen class="ion-padding">
  <p>Colorize Progress Bar</p>
  <ion-progress-bar value="0.60" color="success"></ion-progress-bar>
  <br>
  <ion-progress-bar value="0.50" color="warning"></ion-progress-bar>
  <br>
  <ion-progress-bar value="0.70" color="danger"></ion-progress-bar>
</ion-content>

输出：

与进度栏绑定变量

我们还可以将进度栏与该值绑定。为此, 我们需要在方括号中添加值, 这将变量绑定到此value属性。以下示例对其进行了更清晰的说明。

例

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

Home.page.html

<ion-header>
    <ion-toolbar color="light">
      <ion-title>Ionic Progress Bar</ion-title>
    </ion-toolbar>
  </ion-header>
  
<ion-content fullscreen class="ion-padding">
  <p>Bind to Variable</p>
  <br>
  <ion-progress-bar [value]="progress"></ion-progress-bar>
</ion-content>

Home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  progress = 0;
  constructor() {
    setInterval( () => {
      this.progress += .1;
      }, 1000 );
  }
}

输出：

当你执行上面的Ionic应用程序时, 它将提供以下输出。在这里, 你将看到, 当值超过时, 进度条也将超过。