Skip to main content

进度条

WdProgress

适用场景​

表示当前进度的进度条，如上传文件进度、音频播放进度等。

扩展场景说明​

步长​

示例

配置步长为 20 的进度条。

配置方法

评分属性区域-基础属性-数值调整步长，输入 20 为目标步长。随即可在编辑器区域点击进度条进行验证。

示例​

交互式预览​

可点击、拖拽的进度条​

属性​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
显示进度百分比showPercentboolean
最小值minnumber0
最大值maxnumber

默认值：100

数值调整步长stepnumber

控制每次点击数值调整按钮后，增加/减少的数值大小

默认值：1

显示标题labelVisibleboolean

默认值：true

标题对齐labelAlignstring

表单场景下默认会跟随表单容器的标题对齐配置

标题换行labelWrapboolean

如果标题内容过长关闭时只显示一行、溢出省略；开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置

标题位置layoutstring

设置标题在表单组件的展示位置，表单场景下默认会跟随表单容器的标题的位置配置

标题宽度labelWidthstring

您可以输入数值 + px、%等单位，示例：200px

表单场景下默认会跟随表单容器的标题宽度配置

标题提示labelTipsstring

PC/H5端生效

配置标题的工具提示内容

必填requiredboolean

启用后该组件强制必填，值不可为空

必填标识requiredFlagboolean

启用后，组件若要求必填，则会显示必填星号标记

默认值：true

必填校验提示requiredMsgstring

启用必填，但组件值为空时的提示信息

默认值："该项为必填项"

状态statusstring

默认值："edit"

绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。

标题内容labelstring

示例："标题"

进度值valuenumber

事件​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
值改变changeobject
  • value: number进度值
兼容三端

-

属性 API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。

标题内容labelstring
显示进度百分比showPercentboolean
最小值minnumber
最大值maxnumber
进度值valuenumber
数值调整步长stepnumber

控制每次点击数值调整按钮后，增加/减少的数值大小

是否展示visibleboolean

组件是否展示

是否禁用disabledboolean

组件是否禁用

是否只读readOnlyboolean

组件是否只读

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-progress-root组件最外层元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-progress-root {
  /* 在这里编写CSS 样式 */
}
PC 端根元素.wd-pc-progress-root可设定 PC 端的根元素样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-progress-root {
  /* 在这里编写CSS 样式 */
}
H5 端根元素.wd-h5-progress-root可设定 H5 端的根元素样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-progress-root {
  /* 在这里编写CSS 样式 */
}
小程序端根元素.wd-mp-progress-root可设定小程序端的根元素样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-progress-root {
  /* 在这里编写CSS 样式 */
}
组件标题样式.wd-progress-root .wd-form-item-wrap__label组件标题元素

:scope .wd-form-item-wrap__label {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
进度条容器元素.wd-progress-container可以为进度条容器编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-progress-container {
  /* 在这里编写CSS 样式 */
}
进度条轨道元素.wd-progress可以为进度条轨道编写样式

:scope .wd-progress {
  background-color: green;
}
进度条进度元素.wd-progress__value可以为表示当前进度条进度的元素编写样式

/* 进度条颜色 */
:scope .wd-progress__value {
  background-color: red;
}
/* 进度条高度 */
:scope .wd-progress__value {
  height: 20px;
}
/* 进度条圆角大小 */
:scope .wd-progress__value {
  border-radius: 5px;
}
:scope .wd-progress {
  border-radius: 5px;
}

了解样式 API