shadow
プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには2つのタイプがあります。プログレスバーには、determinate
とindeterminate
の2種類があります。
Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は value
プロパティを設定することで表現されます。こ れは、進捗が0から100%まで増加するように表示するために使用できます。
buffer
プロパティが設定されている場合、バッファーストリームがアニメーションの円と共に表示され、アクティビティを示します。また、buffer
プロパティの値は、目に見えるトラックの量によって表されます。もし buffer
の値が value
プロパティより小さければ、目に見えるトラックはありません。もし buffer
が 1
に等しければ、バッファースリームは隠されます。
Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは value
と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。
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 |
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 | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
Default | undefined |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
Description | If true, reverse the progress bar direction. |
Attribute | reversed |
Type | boolean |
Default | false |
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' |
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 |
No events available for this component.
No public methods available for this component.
Name | Description |
---|
progress | The progress bar that shows the current value when type is "determinate" and slides back and forth when type is "indeterminate" . |
stream | The animated circles that appear while buffering. This only shows when buffer is set and type is "determinate" . |
track | The 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. |
Name | Description |
---|
--background | Background of the progress track, or the buffer bar if buffer is set |
--progress-background | Background of the progress bar representing the current value |
Name | Description |
---|
--background | Background of the progress track, or the buffer bar if buffer is set |
--progress-background | Background of the progress bar representing the current value |
No slots available for this component.