进度条
WdProgress
适用场景
表示当前进度的进度条,如上传文件进度、音频播放进度等。
扩展场景说明
步长
示例
配置步长为 20 的进度条。
配置方法
评分属性区域-基础属性-数值调整步长,输入 20
为目标步长。随即可在编辑器区域点击进度条进行验证。
示例
交互式预览
可点击、拖拽的进度条
属性
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
---|
最小值 | min | number | 0 |
最大值 | max | number | 默认值:100 |
数值调整步长 | step | number | 控制每次点击数值调整按钮后,增加/减少的数值大小 默认值:1 |
显示标题 | labelVisible | boolean | 默认值:true |
标题对齐 | labelAlign | string | 表单场景下默认会跟随表单容器的标题对齐配置 |
标题换行 | labelWrap | boolean | 如果标题内容过长关闭时只显示一行、溢出省略;开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置 |
标题位置 | layout | string | 设置标题在表单组件的展示位置,表单场景下默认会跟随表单容器的标题的位置配置 |
标题宽度 | labelWidth | string | 表单场景下默认会跟随表单容器的标题宽度配置 |
标题提示 | labelTips | string | 配置标题的工具提示内容 |
必填 | required | boolean | 启用后该组件强制必填,值不可为空 |
必填标识 | requiredFlag | boolean | 启用后,组件若要求必填,则会显示必填星号标记 默认值:true |
必填校验提示 | requiredMsg | string | 启用必填,但组件值为空时的提示信息 默认值:"该项为必填项" |
状态 | status | string | 默认值:"edit" |
绑定字段 | name | string | 表单字段的Key值,用于提交数据时,匹配数据模型字段标识。页面内需保证唯一。 |
标题内容 | label | string | 示例:"标题" |
进度值 | value | number |
事件
组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
值改变 | change | object
| 兼容三端 | - |
属性 API
通过属性 API,可以获取组件内部的状态和属性值,可以通过$w.componentId.propertyName
来访问组件内部的值,如 $w.input1.value
,详请请参考 属性 API
只读属性名 | 属性标识 | 类型 | 说明 |
---|
绑定字段 | name | string | 表单字段的Key值,用于提交数据时,匹配数据模型字段标识。页面内需保证唯一。 |
标题内容 | label | string | |
最小值 | min | number | |
最大值 | max | number | |
进度值 | value | number | |
数值调整步长 | step | number | 控制每次点击数值调整按钮后,增加/减少的数值大小 |
是否展示 | visible | boolean | 组件是否展示 |
是否禁用 | disabled | boolean | 组件是否禁用 |
是否只读 | readOnly | boolean | 组件是否只读 |
样式 API
通过样式 API,可以覆盖组件中内部元素的样式来实现自定义,例如在低代码编辑器中中通过 #wd-page-root .wd-btn
即可为所有的按钮组件编写样式,通过 :scope
可以控制单个组件样式, 详细说明请参考样式 API
名称 | 类名 | 说明和示例 |
---|
根元素 | .wd-progress-root | 组件最外层元素
|
PC 端根元素 | .wd-pc-progress-root | 可设定 PC 端的根元素样式
|
H5 端根元素 | .wd-h5-progress-root | 可设定 H5 端的根元素样式
|
小程序端根元素 | .wd-mp-progress-root | 可设定小程序端的根元素样式
|
组件标题样式 | .wd-progress-root .wd-form-item-wrap__label | 组件标题元素
|
进度条容器元素 | .wd-progress-container | 可以为进度条容器编写样式
|
进度条轨道元素 | .wd-progress | 可以为进度条轨道编写样式
|
进度条进度元素 | .wd-progress__value | 可以为表示当前进度条进度的元素编写样式
|