搜索文档 /
影子

ion-progress-bar

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

进步的类型

Determinate是默认类型。当操作的百分比已知时,应该使用它。参数表示进度 价值 财产。这可以用来显示从0到100%的进度。

如果 缓冲 属性时,将显示一个缓冲区流,以动画圆圈表示活动。的值 缓冲 属性也将由可见轨迹的多少来表示。如果 缓冲 小于 价值 属性,将不会有可见的轨迹。如果 缓冲 等于 1 然后缓冲流将被隐藏。

不确定的

当不知道该过程需要多长时间时,应该使用不确定类型。进度条没有绑定到 价值 ,相反,它会沿着轨道不断滑动,直到过程完成。

使用


                < !——默认Progressbar——>
               
                  <
                 ion-progress-bar
                 >
                  
                 ion-progress-bar
                 >
               
                < !——默认进度条50%——>
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                < !——给Progressbar着色——>
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 
                  
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 二次
                  
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                < !——其他类型——>
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                 0.25
                  
                
                 缓冲
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                
                 逆转
                  
                  
                 真正的
                  
                 >
                  
                 ion-progress-bar
                 >
复制 复制

                < !——默认Progressbar——>
               
                  <
                 ion-progress-bar
                 >
                  
                 ion-progress-bar
                 >
               
                < !——默认进度条50%——>
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                < !——给Progressbar着色——>
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 
                  
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 二次
                  
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                < !——其他类型——>
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                 0.25
                  
                
                 缓冲
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                
                 逆转
                  
                  
                 真正的
                  
                 >
                  
                 ion-progress-bar
                 >
复制 复制

                进口
               反应
                
               
                “反应”
                ;
               
                进口
               
                
               IonProgressBar
                
               IonContent
                
               
                
               
                “@betway东盟体育appionic /反应”
                ;
               
                出口
               
                常量
               ProgressbarExample
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                  <
                  IonContent
                 >
                
                
                /*——默认进度栏——*/
                
                
                  <
                  IonProgressBar
                 >
                  
                  IonProgressBar
                 >
                  <
                 br
                
                 />
                
                
                /*——默认进度条为50%——*/
                
                
                  <
                  IonProgressBar
                
                 价值
                  
                  
                  0.5
                  
                 >
                  
                  IonProgressBar
                 >
                  <
                 br
                
                 />
                
                
                /*——colorred Progressbar——*/
                
                
                  <
                  IonProgressBar
                
                 颜色
                  
                  
                 
                  
                
                 价值
                  
                  
                  0.5
                  
                 >
                  
                  IonProgressBar
                 >
                  <
                 br
                
                 />
                
                  <
                  IonProgressBar
                
                 颜色
                  
                  
                 二次
                  
                
                 价值
                  
                  
                  0.5
                  
                 >
                  
                  IonProgressBar
                 >
                  <
                 br
                
                 />
                
                
                /*——其他类型——*/
                
                
                  <
                  IonProgressBar
                
                 价值
                  
                  
                  0.25
                  
                
                 缓冲
                  
                  
                  0.5
                  
                 >
                  
                  IonProgressBar
                 >
                  <
                 br
                
                 />
                
                  <
                  IonProgressBar
                
                 类型
                  
                  
                 不确定的
                  
                 >
                  
                  IonProgressBar
                 >
                  <
                 br
                
                 />
                
                  <
                  IonProgressBar
                
                 类型
                  
                  
                 不确定的
                  
                
                 逆转
                  
                  
                  真正的
                  
                 >
                  
                  IonProgressBar
                 >
                  <
                 br
                
                 />
                
                  
                  IonContent
                 >
               
                
                ;
复制 复制

                进口
               
                
               组件
                
               h
                
               
                
               
                “@stencil /核心”
                ;
               
                组件
                
                
               标签
                
               
                “progress-bar-example”
                
               styleUrl
                
               
                “progress-bar-example.css”
               
                
                
               
                出口
               
                
               
                ProgressBarExample
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                / /默认Progressbar
               
                  <
                 ion-progress-bar
                 >
                  
                 ion-progress-bar
                 >
                
               
                //默认进度条为50%
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                  0.5
                  
                 >
                  
                 ion-progress-bar
                 >
                
               
                / /再着色Progressbar
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 
                  
                
                 价值
                  
                  
                  0.5
                  
                 >
                  
                 ion-progress-bar
                 >
                
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 二次
                  
                
                 价值
                  
                  
                  0.5
                  
                 >
                  
                 ion-progress-bar
                 >
                
               
                / /其他类型
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                  0.25
                  
                
                 缓冲
                  
                  
                  0.5
                  
                 >
                  
                 ion-progress-bar
                 >
                
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                 >
                  
                 ion-progress-bar
                 >
                
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                
                 逆转
                  
                  
                  真正的
                  
                 >
                  
                 ion-progress-bar
                 >
               
                
                ;
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                < !——默认Progressbar——>
               
                  <
                 ion-progress-bar
                 >
                  
                 ion-progress-bar
                 >
               
                < !——默认进度条50%——>
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                < !——给Progressbar着色——>
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 
                  
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 颜色
                  
                  
                 二次
                  
                
                 价值
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                < !——其他类型——>
               
                  <
                 ion-progress-bar
                
                 价值
                  
                  
                 0.25
                  
                
                 缓冲
                  
                  
                 0.5
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  <
                 ion-progress-bar
                
                 类型
                  
                  
                 不确定的
                  
                
                 逆转
                  
                  
                 真正的
                  
                 >
                  
                 ion-progress-bar
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonProgressBar
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  ;
                 
                  进口
                 
                  
                 defineComponent
                  
                 
                  
                 
                  “vue”
                  ;
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 IonProgressBar
                  
                 
                  
                  
                  ;
                 
                  
                 脚本
                 >
复制 复制

属性

缓冲

描述

如果缓冲区和值小于1,将显示缓冲圈。缓冲区应该在[0,1]之间。

属性 缓冲
类型 数量
默认的 1

颜色

描述

应用程序调色板中要使用的颜色。默认的选项是:“主”“二级”“三级”“成功”“警告”“危险”“光”“媒介”,“黑暗”.有关颜色的更多信息,请参见 主题

属性 颜色
类型 字符串|未定义

模式

描述

模式决定使用哪种平台样式。

属性 模式
类型 “ios”|“医学博士”

逆转

描述

如果为真,反转进度条的方向。

属性 逆转
类型 布尔
默认的

类型

描述

进度条的状态,基于过程所花费的时间是否已知。默认的选项是:“确定”(没有动画),“不确定”(动画从左到右)。

属性 类型
类型 “决定性”|“不定”
默认的 “确定”

价值

描述

时,该值决定了活动栏应该显示多少类型“确定”.取值范围为[0,1]。

属性 价值
类型 数量
默认的 0

CSS阴影部分

的名字 描述
进步 进度条在“类型”为“确定”时显示当前值,在“类型”为“不确定”时来回滑动。
缓冲时出现的动画圆圈。这只显示当设置了' buffer '且' type '为' "determinate" '时。
跟踪 进度条后面的跟踪条。如果设置了buffer属性且type为determinate,则轨迹的宽度就是buffer值的宽度。

CSS自定义属性

的名字 描述
——背景 进度跟踪的背景,或者设置“buffer”时的缓冲栏
——buffer-background 已弃用,请使用'——background '代替
——progress-background 表示当前值的进度条的背景
查看源代码
Baidu