【progress】 进度条组件说明
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】 进度条组件说明的更多相关文章
- 微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- 详解Bootstrap进度条组件
在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
- 基于Vue的事件响应式进度条组件
写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...
- 【Android 应用开发】 自定义 圆形进度条 组件
转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...
- 数字进度条组件NumberProgressBar
数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...
- vue 的进度条组件
先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...
随机推荐
- love paradise - 陈慧琳
love paradise - 陈慧琳 You're always on my mind All day just all the time You're everything to me Brigh ...
- 单独调用kindeditor的多图上传组件实现多图上传
本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...
- 使用RMAN增量备份处理Dataguard因归档丢失造成的gap
场景: 备库执行日志应用出现如下报错: Thu Mar 29 11:21:45 2018FAL[client]: Failed to request gap sequence GAP - thread ...
- STL笔记
STL的基本概念: 1-容器:是可容纳各种类型的数据结构,是 类模板. 2-迭代器:是用于依次存放容器中的元素,类似指针. 3-算法: 是用于操作容器中元素的 函数模板. sort() 用来对 vec ...
- MySQL正则表达式的问题
原本以为 正则表达式里面的特殊\d匹配数字放到sql语句里面也是适用的,没想到一直不匹配.但是放到编程语言java或者js里面又匹配.看了一下原来sql对正则的支持没有那么全面.一定要用[0-9]代表 ...
- shell习题第1题:每日一文件
[题目要求] 请按照这样的日期格式(xxxx-xx-xx)每日生成一个文件 例如生成的文件为2019-04-25.log,并且把磁盘使用情况写入到这个文件中 不用考虑cron,仅仅写脚本即可 [核心要 ...
- 继续深入更新shell脚本容易出错的地方
一.在shell中用到如果需要输入某些值,需要用到read -p命令 这是我写的猜数字游戏,一开始在输出的时候,屏幕上总会打印输出 "INT" 经过反复的练习才发现 双引号后面应 ...
- double工具类
package com.zq.utils; /** * * 经度数字操作类 * * Created by MyEclipse. Author: ChenBin E-mail: chenbin_2008 ...
- 可以提高php编程效率的20个要点
整理了可以提高php编程效率的20个要点,发博客记录一下,需要的朋友可以参考. 1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 2.$row['id' ...
- QEP之init()和dispatch()流程图
抽象状态机类QFsm或QHsm有一个函数指针,用于在继承的具体状态机类中指向具体的状态函数,其有两个对外的接口函数init()和dispatch(),其工作原理是理解状态机处理事件过程的关键. 具体状 ...