ion-progress-bar

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4进度指示组件ion-progress-bar对项目进行布局。ion-progress-bar中有Progress Type ,ionic ion-progress-bar 用法(Usage) ,ionic ion-progress-bar 属性(Properties) ,ionic ion-progress-bar 中的CSS 自定义属性等

ion-progress-bar is a horizontal progress bar to visualize the progression of an operation and activity. You can choose between two types: determinate and indeterminate.

Progress Type

Determinate

If the percentage of an operation is known, you should use the determinate type. This is the default type and the progress is represented by the value property.

A buffer shows circles as animation to indicate some activity. If the buffer property is smaller than 1 you can show the addditional buffering progress.

Indeterminate

If an operation is in progress and it's not necessary to indicate how long it will take.

If you add reversed="true", you receive a query which is used to indicate pre-loading.

ion-progress-bar 用法(Usage)

javascript

<ion-progress-bar>ion-progress-bar>


<ion-progress-bar value="0.5">ion-progress-bar>


<ion-progress-bar color="primary" value="0.5">ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5">ion-progress-bar>


<ion-progress-bar value="0.25" buffer="0.5">ion-progress-bar>
<ion-progress-bar type="indeterminate">ion-progress-bar>
<ion-progress-bar type="indeterminate" reversed="true">ion-progress-bar>

ion-progress-bar 属性(Properties)

buffer

Description

If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].

Attribute buffer
Type number

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

reversed

Description

If true, reverse the progress bar direction.

Attribute reversed
Type boolean

type

Description

The state of the progress bar, based on if the time the process takes is known or not. Default options are: "determinate" (no animation), "indeterminate" (animate from left to right).

Attribute type
Type "determinate" | "indeterminate"

value

Description

The value determines how much of the active bar should display when the type is "determinate". The value should be between [0, 1].

Attribute value
Type number

ion-progress-bar中的CSS 自定义属性

Name Description
--background Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself.
--buffer-background Color of the buffer bar
--progress-background Color of the progress bar