ion-progress-bar

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4进度指示组件ion-progress-bar对项目进行布局。

ion-progress-bar官方文档地址:https://ionicframework.com/docs/api/progress-bar

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)


<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>
import React from 'react';

import { IonProgressBar } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    {/*-- Default Progressbar --*/}
    <IonProgressBar>IonProgressBar>

    {/*-- Default Progressbar with 50 percent --*/}
    <IonProgressBar value={0.5}>IonProgressBar>

    {/*-- Colorize Progressbar --*/}
    <IonProgressBar color="primary" value={0.5}>IonProgressBar>
    <IonProgressBar color="secondary" value={0.5}>IonProgressBar>

    {/*-- Other types --*/}
    <IonProgressBar value={0.25} buffer={0.5}>IonProgressBar>
    <IonProgressBar type="indeterminate">IonProgressBar>
    <IonProgressBar type="indeterminate" reversed={true}>IonProgressBar>
  >
);

export default Example;

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
Default 1

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
Default false

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"
Default 'determinate'

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
Default 0

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