Question

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)

javascriptreact

</ion-progress-bar>

import React from 'react';

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

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

    {/*-- Default Progressbar with 50 percent --*/}
    

    {/*-- Colorize Progressbar --*/}
    
    

    {/*-- Other types --*/}
    
    
    
  
);

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