shadowプログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには2つのタイプがあります。プログレスバーには、determinateとindeterminateの2種類があります。
Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は value プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。
If the buffer property is set, a buffer stream will show with animated circles to indicate activity. The value of the buffer property will also be represented by how much visible track there is. If the value of buffer is less than the value property, there will be no visible track. If buffer is equal to 1 then the buffer stream will be hidden.
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 & Record<never, never> ｜ 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 |
--buffer-background | DEPRECATED, use --background instead |
--progress-background | Background of the progress bar representing the current value |
No slots available for this component.