ion-progress-bar
进度条告知用户正在进行的进程的状态，例如加载应用、提交表单或保存更新。进度条有两种类型：determinate 和 indeterminate。
¥Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: determinate and indeterminate.
确定性
¥Determinate
确定是默认类型。当操作的百分比已知时应使用它。进度通过设置 value 属性来表示。这可用于显示轨道从 0% 增加到 100% 的进度。
¥Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the value property. This can be used to show the progress increasing from 0 to 100% of the track.
缓冲
¥Buffer
如果设置了 buffer 属性，缓冲流将显示动画圆圈以指示活动。buffer 属性的值也将由有多少可见轨道来表示。如果 buffer 的值小于 value 属性，则不会有可见轨道。如果 buffer 等于 1 则缓冲流将被隐藏。
¥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 绑定，而是沿着轨道不断滑动，直到过程完成。
¥The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the value, instead it continually slides along the track until the process is complete.
工具栏中的进度条
¥Progress Bars in Toolbars
主题化
¥Theming
颜色
¥Colors
CSS 自定义属性
¥CSS Custom Properties
CSS 阴影部分
¥CSS Shadow Parts
属性
¥Properties
buffer
| 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 |
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. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
reversed
| Description | If true, reverse the progress bar direction. |
| Attribute | reversed |
| Type | boolean |
| Default | false |
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). |
| Attribute | type |
| 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]. |
| Attribute | value |
| Type | number |
| Default | 0 |
事件
¥Events
No events available for this component.
方法
¥Methods
No public methods available for this component.
CSS 阴影部分
¥CSS Shadow Parts
| 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. |
CSS 自定义属性
¥CSS Custom Properties
- iOS
- MD
| 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 |
插槽
¥Slots
No slots available for this component.