ion-progress-bar

Contents

ion-progress-bar は操作や処理の進捗を可視化するための、水平方向のプログレスバーです。determinate または indeterminateの2タイプから選択できます。

Progress Type

Determinate

操作の進捗率が分かる場合はdeterminateタイプを選択するべきです。このタイプはデフォルトであり、進捗率はvalue属性値にて指定します。

バッファは何らかの処理中であることを表す、円のアニメーションを表示します。 buffer属性値が1より小さければ、追加のバッファ処理の進捗率を示すことが可能です。

Indeterminate

実行中の操作を表します。操作にかかる時間を示す必要はありません。

reversed="true"を指定した場合、ロード前状態を表すための表示となります。

利用方法

<!-- Default Progressbar -->
<ion-progress-bar></ion-progress-bar>

<!-- Default Progressbar with 50 percent -->
<ion-progress-bar value="0.5"></ion-progress-bar>

<!-- Colorize Progressbar -->
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>

<!-- Other types -->
<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, IonContent } from '@ionic/react';

export const ProgressbarExample: React.FunctionComponent = () => (
  <IonContent>
    {/*-- Default Progressbar --*/}
    <IonProgressBar></IonProgressBar><br />

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

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

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

プロパティ

buffer

Description

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

Attributebuffer
Typenumber
Default1

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.

Attributecolor
Typestring | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

reversed

Description

If true, reverse the progress bar direction.

Attributereversed
Typeboolean
Defaultfalse

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).

Attributetype
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].

Attributevalue
Typenumber
Default0

CSSカスタムプロパティ

NameDescription
--backgroundSame as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself.
--buffer-backgroundColor of the buffer bar
--progress-backgroundColor of the progress bar
View Source