StanleyBlogs

layui使用 进度条

作者 : Stanley 罗昊

【转载请注明出处和署名,谢谢!】

【编程工具:IDEA】

 进度条

我们在文档中可以点击进度条查看:

 这个进度条,该怎么去实现呢?其实还是要去查看源代码,拿下来我们分析下;

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>默认风格的进度条</legend>
</fieldset>
  
<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
  <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="70%"></div>
  </div>
</div>

执行结果:

代码分析

layui-progress代表是一个进度条
layui-progress-bar代表进度条内的进度比例

属性分析
lay-percent代表比例值;

选取更多的颜色
在文档中,我们发现进度条可以切换颜色,其实很简单,就在进度比例的代码后面再加上一句即可:
layui-bg-red

 

 在圆圈中,我们可以切换各种颜色,我写的red也就是红色,我的运行结果进度条就会变成红色;

 大尺寸进度条

 <legend>大尺寸进度条</legend>
</fieldset>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>

在原尺寸条的基础上,添加了一行代码即可;

 执行效果:

 显示文本比例

添加这行代码,即可显示文本比例:

 lay-showpercent="true"

 执行效果:

分类:

技术点:

相关文章: