メインコンテンツまでスキップ
Version: v6

ion-progress-bar

shadow

コンテンツ

プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには2つのタイプがあります。プログレスバーには、determinateindeterminateの2種類があります。

進捗のタイプ

Determinate

Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は value プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。

buffer プロパティが設定されている場合、バッファストリームがアニメーションの円と共に表示され、アクティビティを示します。また、bufferプロパティの値は、目に見えるトラックの量によって表されます。もし、bufferの値が value プロパティよりも小さい場合、可視トラックはありません。もし buffer1 と等しい場合は、バッファストリームは隠されます。

Indeterminate

Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは value と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。

使い方

<!-- 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>

プロパティ

buffer

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

color

DescriptionThe 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
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

reversed

DescriptionIf true, reverse the progress bar direction.
Attributereversed
Typeboolean
Defaultfalse

type

DescriptionThe 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

DescriptionThe 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

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
progressThe progress bar that shows the current value when type is "determinate" and slides back and forth when type is "indeterminate".
streamThe animated circles that appear while buffering. This only shows when buffer is set and type is "determinate".
trackThe track bar behind the progress bar. If the buffer property is set and type is "determinate" the track will be the width of the buffer value.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the progress track, or the buffer bar if buffer is set
--buffer-backgroundDEPRECATED, use --background instead
--progress-backgroundBackground of the progress bar representing the current value

Slots

No slots available for this component.

View Source