跳至主要内容
版本: v8

ion-progress-bar

阴影

进度条告知用户正在进行的进程状态,例如加载应用程序、提交表单或保存更新。进度条有两种类型:确定型不确定型

确定型

确定型是默认类型。当操作的百分比已知时,应使用它。进度通过设置 value 属性来表示。这可以用来显示进度从轨道的 0% 到 100% 的增加。

缓冲

如果设置了 buffer 属性,缓冲流将显示带动画圆圈以指示活动。buffer 属性的值也由可见轨道的大小表示。如果 buffer 的值小于 value 属性的值,则将没有可见轨道。如果 buffer 等于 1,则缓冲流将隐藏。

不确定型

当不知道进程将持续多长时间时,应使用不确定型类型。进度条不与 value 绑定,而是不断沿着轨道滑动,直到进程完成。

工具栏中的进度条

主题

颜色

CSS 自定义属性

CSS 阴影部分

属性

buffer

描述如果缓冲区和值小于 1,则会显示缓冲区圆圈。缓冲区应在 [0, 1] 之间。
属性buffer
类型number
默认值1

color

描述要从应用程序的颜色调色板中使用的颜色。默认选项为:"primary""secondary""tertiary""success""warning""danger""light""medium""dark"。有关颜色的更多信息,请参阅 主题
属性color
类型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
默认值undefined

mode

描述模式决定使用哪个平台样式。
属性mode
类型"ios" | "md"
默认值undefined

reversed

描述如果为真,则反转进度条方向。
属性reversed
类型boolean
默认值false

type

描述进度条的状态,基于进程持续时间是已知还是未知。默认选项为:"determinate"(无动画)、"indeterminate"(从左到右动画)。
属性type
类型"determinate" | "indeterminate"
默认值'determinate'

value

描述type"determinate" 时,该值决定活动栏应显示多少。该值应在 [0, 1] 之间。
属性value
类型number
默认值0

事件

此组件没有可用事件。

方法

此组件没有可用的公共方法。

CSS 阴影部分

名称描述
progresstype"determinate" 时显示当前值的进度条,当 type"indeterminate" 时,进度条会来回滑动。
stream当缓冲时出现的动画圆圈。仅当 buffer 设置且 type"determinate" 时才会显示此圆圈。
track进度条后面的轨道栏。如果设置了 buffer 属性并且 type"determinate",则轨道将与 buffer 值的宽度相同。

CSS 自定义属性

名称描述
--background进度轨道的背景,如果设置了 buffer,则为缓冲条的背景
--progress-background表示当前值的进度条的背景

插槽

此组件没有可用插槽。