Skip to main content

Progress Bar

WdProgress

Applicable Scenarios​

A progress bar that indicates the current progress, such as file upload progress, audio playback progress, etc.

Extended Scenarios Description​

Step Size​

Example

Configure a progress bar with a step size of 20.

Configuration Method

In the Scoring Attributes Area - Basic Properties - Numerical Adjustment Step Size, enter 20 as the target step size. Then click the progress bar in the editor area to verify.

Example​

Interactive Preview​

Clickable and Draggable Progress Bar​

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
显示进度百分比showPercentboolean
最小值minnumber0
最大值maxnumber

Default value: 100

数值调整步长stepnumber

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

Default value: 1

显示标题labelVisibleboolean

Default value: true

标题对齐labelAlignstring

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

标题换行labelWrapboolean

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

标题位置layoutstring

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

标题宽度labelWidthstring

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

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

标题提示labelTipsstring

PC/H5端生效

配置标题的工具提示内容

必填requiredboolean

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

必填标识requiredFlagboolean

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

Default value: true

必填校验提示requiredMsgstring

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

Default value: "该项为必填项"

状态statusstring

Default value: "edit"

绑定字段namestring

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

标题内容labelstring

Example: "标题"

进度值valuenumber

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
值改变changeobject
  • value: number进度值
Compatible with all platforms

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
绑定字段namestring

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

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

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

是否展示visibleboolean

组件是否展示

是否禁用disabledboolean

组件是否禁用

是否只读readOnlyboolean

组件是否只读

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-progress-root组件最外层元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-progress-root {
  /* Write CSS styles here */
}
PC 端根元素.wd-pc-progress-root可设定 PC 端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-progress-root {
  /* Write CSS styles here */
}
H5 端根元素.wd-h5-progress-root可设定 H5 端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-progress-root {
  /* Write CSS styles here */
}
小程序端根元素.wd-mp-progress-root可设定小程序端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-progress-root {
  /* Write CSS styles here */
}
组件标题样式.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 refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-progress-container {
  /* Write CSS styles here */
}
进度条轨道元素.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;
}

Learn about Style API