IT评测·应用市场-qidao123.com

标题: 鸿蒙5.0版开辟：UI框架JS组件-基础组件（progress） [打印本页]

作者: 没腿的鸟 时间: 2025-3-8 19:29
标题: 鸿蒙5.0版开辟：UI框架JS组件-基础组件（progress）
往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

鸿蒙开辟核心知识点，看这篇文章就够了
最新版！鸿蒙HarmonyOS Next应用开辟实战学习路线
鸿蒙HarmonyOS NEXT开辟技能最全学习路线指南
鸿蒙应用开辟实战项目，看这一篇文章就够了（部门项目附源码）

progress

进度条，用于显示内容加载或操作的处理进度。
说明：
从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件

不支持。
属性

除支持通用属性外，还支持如下属性：
名称范例默认值必填形貌typestringhorizontal否设置进度条的范例，该属性不支持动态修改，可选值为：
- horizontal：线性进度条。
- circular：loading样式进度条。
- ring：圆环形进度条。
- scale-ring：带刻度圆环形进度条。
- arc：弧形进度条。
- eclipse：圆形进度条，展现类似月圆月缺的进度展示效果。差别范例的进度条还支持差别的属性：

范例为horizontal、ring、scale-ring时，支持如下属性：
名称范例默认值必填形貌percentnumber0否当前进度。取值范围为0-100。secondarypercent(Rich)number0否次级进度。取值范围为0-100。
范例为ring、scale-ring时，支持如下属性：
名称范例默认值必填形貌clockwisebooleantrue否圆环形进度条是否采用顺时针。
范例为arc、eclipse时，支持如下属性：
名称范例默认值必填形貌percentnumber0否当前进度。取值范围为0-100。

样式

除支持通用样式外，还支持如下样式：
type=horizontal
名称范例默认值必填形貌color<color>#ff007dff否设置进度条的颜色。stroke-width<length>4px否设置进度条的宽度。background-color<color>-否设置进度条的背景色。secondary-color<color>-否设置次级进度条的颜色。 type=circular
名称范例默认值必填形貌color<color>-否loading进度条上的圆点颜色。 type=ring, scale-ring
名称范例默认值必填形貌color<color> | <linear-gradient>-否环形进度条的颜色，ring范例支持线性渐变色设置。
线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(#ff0000, #00ff00)。background-color<color>-否环形进度条的背景色。secondary-color<color>-否环形次级进度条的颜色。stroke-width<length>10px否环形进度条的宽度。scale-width<length>-否带刻度的环形进度条的刻度粗细，范例为scale-ring生效。scale-numbernumber120否带刻度的环形进度条的刻度数量，范例为scale-ring生效。 type=arc
名称范例默认值必填形貌color<color>-否弧形进度条的颜色。background-color<color>-否弧形进度条的背景色。stroke-width<length>-否弧形进度条的宽度。
进度条宽度越大，进度条越靠近圆心。即进度条始终在半径区域内。start-angle<deg>240否弧形进度条起始角度，以时钟0点为基线。范围为0到360（顺时针）。total-angle<deg>240否弧形进度条总长度，范围为-360到360，负数标识起点到尽头为逆时针。center-x<length>-否弧形进度条中央位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起。center-y<length>-否弧形进度条中央位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起。radius<length>-否弧形进度条半径，该样式需要和center-x和center-y一起。事件

支持通用事件。
示例

<div class="container">
<progress class="min-progress" type="scale-ring" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress" type="arc" percent= "10"></progress>
<progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress>
</div>

复制代码

/* xxx.css */
.container {
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
}
.min-progress {
width: 300px;
height: 300px;
}

复制代码

4*4卡片

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)