返回介绍

开发指南

组件

JS

模板

LineProgress 线形进度条

发布于 2021-04-03 05:35:24 字数 2835 浏览 1008 评论 0 收藏 0

LineProgress 线形进度条 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

  • 通过percent设置当前的进度值,该值区间为0-100.
  • 通过active-color设置进度条的颜色,也可以直接设置type主题颜色(优先起作用),使用预置值
<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>

设置进度条动画效果

该效果会在已完成的百分比部分显示移动的条纹(具体见示例效果)

  • striped参数配置是否显示条纹
  • striped-active参数配置条纹是否具有动态效果
<u-line-progress :striped="true" :percent="70" :striped-active="true"></u-line-progress>

设置进度条内部显示百分比值

参数为show-percent

  • 说明:进度条可以通过height设置高度,如果高度太小的话,是无法在内部显示当前的百分比值的
<u-line-progress :percent="70" :show-percent="true"></u-line-progress>

修改进度条的样式

  • active-color参数修改激活部分的颜色
  • round参数设置进度条两端是否为半圆
<u-line-progress :percent="70" :round="false" active-color="#ff9900"></u-line-progress>

API

Props

参数说明类型默认值可选值
percent进度条百分比值,为数值类型,0-100String | Number--
round进度条两端是否为半圆Booleantruefalse
type如设置,active-color值将会失效String-success / primary / error / info / warning
active-color进度条激活部分的颜色String#19be6b-
inactive-color进度条的底色,默认为灰色String#ececec-
show-percent是否在进度条内部显示当前的百分比值数值Booleantruefalse
height进度条的高度,单位rpxString | Number28-
striped是否显示进度条激活部分的条纹Booleanfalsetrue
striped-active条纹是否具有动态效果Booleanfalsetrue

Slots

名称说明
default 1.5.4传入自定义的显示内容,将会覆盖默认显示的百分比值

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文