progress 进度条组件

原型:

<progress
percent="[Float(0-100)]"
show-info="[Boolean]"
border-radius="[Number | String]"
font-size="[Number | String]"
stroke-width="[Number]"
activeColor="[Color]"
backgroundColor="[Color]"
active="[Boolean]"
active-mode="[backwards | forwards]"
>
</progress>

属性:

名称 是否必需 类型 默认值 说明
percent [Float] 百分比0~100
show-info [Boolean] false 是否在进度条右侧显示百分比
border-radius [Number / String] 0 圆角大小,单位px或rpx,默认为px (最低版本2.3.1)
font-size [Number / String] 16 右侧百分比字体大小,单位px或rpx,默认为px (最低版本2.3.1)
stroke-width [Number / String] 6 进度条线的宽度,单位px或rpx,默认为px
activeColor [Color] #09BB07 进度条颜色
backgroundColor [Color]   未选择的进度条的颜色
active [Boolean] false 进度条从左往右的动画
active-mode [backwards | forwards] backwards

进度值更新时,动画如何播放

backwards: 动画从0开始播放;

forwards:动画从上次结束点接着播;

【progress】 进度条组件说明的更多相关文章

  1. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  3. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  4. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  5. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  6. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  7. 【Android 应用开发】 自定义 圆形进度条 组件

    转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

  8. 数字进度条组件NumberProgressBar

     数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...

  9. vue 的进度条组件

    先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...

随机推荐

  1. java三大特性(封装、继承、多态)

    oop(面向对象程序设计)具有三大特性:封装.继承.多态 一.封装 封装就是讲类的信息隐藏在类的内部,不允许外部程序直接访问,而是通过该类的实现隐藏信息的操作和访问. 实现封装 1.需要修改属性的访问 ...

  2. 第28章 LTDC—液晶显示中英文

    本章参考资料:<STM32F76xxx参考手册>.<STM32F7xx规格书>.库帮助文档<STM32F779xx_User_Manual.chm>. 关于开发板配 ...

  3. 在spring添加注解时,第一行package报错configure build path

    练习spring的ioc的注解的时候写上注解就会在第一行package报错configure build path. 用的spring4.2.4的jar包.经过上网查阅资料,可能是jar包冲突,解决办 ...

  4. jsp内置对象pageContext如何在Servlet中获取值

    pageContext javax.servlet.jsp.PageContext 的实例,该对象代表该JSP 页面上下文,使用该对象可以访问页面中的共享数据.常用的方法有getServletCont ...

  5. 如何在Mac中创建MiniKube

    转载请标明出处: http://blog.csdn.net/forezp/article/details/82563153 本文出自方志朋的博客 这篇文章介绍了如何在Mac系统中创建MiniKube. ...

  6. MySql is marked as crashed and should be repaired问题

    在一次电脑不知道为什么重启之后数据库某表出现了 is marked as crashed and should be repaired这个错误,百度了一下,很多都是去找什么工具然后输入命令之类的,因为 ...

  7. 给出一个整数,将这个整数中每位上的数字进行反转(JavaScript编程)

    一.问题描述:给出一个整数,将这个整数中每位上的数字进行反转.示例:输入:123,输出321:输入-123,输出-321:输入120,输出-21 二.问题分析与解决: 需要将给出的整数反转,注意示例中 ...

  8. Laravel 开发支付宝支付与提现转账问题小结

    由于项目需要,所以需要开发支付宝支付与微信支付,支付部分采用了 yansongda/pay    https://packagist.org/packages/yansongda/pay  https ...

  9. Java开发小技巧(六):使用Apache POI读取Excel

    前言 在数据仓库中,ETL最基础的步骤就是从数据源抽取所需的数据,这里所说的数据源并非仅仅是指数据库,还包括excel.csv.xml等各种类型的数据接口文件,而这些文件中的数据不一定是结构化存储的, ...

  10. 自添加LUCI菜单及编译为ipk

    目录 添加汉化编译为ipk配置文件入口函数界面文件Makefile 添加 添加自己的luci界面,有3个必要的要素: a配置文件.新建一个在/etc/config/abcdefg b入口函数.新建一个 ...