layui进度条与时间线文档

阅读须知:当前文档仅针对layui系列更新:2019-01-20 09:30:09 阅读量:3117 评论跟帖:0 文档整理编辑:Larry

layui中提供的进度条与时间线可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素,将时间抽象到二维平面,垂直呈现一段从过去到现在的故事;【备注:其中进度条依赖layui.element模块完成渲染】

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流




我们进度条提供了两种尺寸及多种颜色的显示风格,其中颜色的选值可参考:背景色公共类。基本元素结构如下

<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="10%"></div>
</div>
 
<script>
//注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>
      

属性 lay-percent :代表进度条的初始百分比,你也可以动态改变进度,进度条的动态操作

正如上述你见到的,当对元素设置了class为 layui-progress-big 时,即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启,会在右上角显示,而大号进度条则会在内部显示。





通过对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示,支持:普通数字百分数分数(layui 2.1.7 新增)

<div class="layui-progress" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div>
       
<div class="layui-progress" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
      

注意:默认情况下不会显示百分比文本,如果你想开启,对属性lay-showPercent设置任意值即可,如:yes。但如果不想显示,千万别设置no或者false,直接剔除该属性即可。




如果短小细长的它不大适合追求激情与视觉冲击的你,那么你完全可以选择大而粗,尽情地销魂于活塞运动。研究表明:上述尺寸刚刚好。

<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
</div>
      

正如上述你见到的,当对元素设置了class为 layui-progress-big 时,即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启,会在右上角显示,而大号进度条则会在内部显示。

如果你需要对进度条进行动态操作,如动态改变进度,那么你需要阅读:layui.element模块的文档介绍

时间线快速使用
  • 8月18日

    layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
    不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
    无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔

  • 8月16日

    杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。个人最爱的名篇有:

    • 《登高》
    • 《茅屋为秋风所破歌》
  • 8月15日

    中国人民抗日战争胜利日
    常常在想,尽管对这个国家有这样那样的抱怨,但我们可能的确生在了最好的时代
    铭记、感恩
    所有为中华民族浴血奋战的英雄将士
    永垂不朽

  • 过去
<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
        <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>
      

关于时间线,似乎也没有什么太多可介绍的东西。你需要留意的是以下几点

  • 图标可以任意定义(但并不推荐更改)
  • 标题区域并不意味着一定要加粗
  • 内容区域可自由填充。