Skip to main content
Version: v8

ion-progress-bar

shadow

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

Determinate

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

Buffer

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

Indeterminate

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

Progress Bars in Toolbars

テーマ

Colors

CSSカスタムプロパティ

CSS Shadow Parts

プロパティ

buffer

Descriptionバッファと値が1より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。
Attributebuffer
Typenumber
Default1

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

reversed

Descriptiontrue の場合、プログレスバーの方向を反転させます。
Attributereversed
Typeboolean
Defaultfalse

type

Description処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate"(アニメーションなし),"indeterminate"` (左から右へアニメーションする).
Attributetype
Type"determinate" | "indeterminate"
Default'determinate'

value

Descriptionこの値は、type"determinate"である場合に、アクティブバーをどれだけ表示するかを決定するものです。値は [0, 1] の間であるべきです。
Attributevalue
Typenumber
Default0

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
progresstype"determinate"のときは現在値を表示し、type"indeterminate"`のときは前後にスライドするプログレスバーです。
streamバッファリング中に表示されるアニメーションの円です。これは buffer が設定され、type"determinate" のときのみ表示される。
trackプログレスバーの後ろにあるトラックバーです。bufferプロパティが設定され、type"determinate"である場合、トラックはbuffer` 値の幅となる。

CSSカスタムプロパティ

NameDescription
--backgroundプログレストラックの背景、または buffer が設定されている場合はバッファバー。
--progress-background現在値を表すプログレスバーの背景

Slots

No slots available for this component.