<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 進度條 - 頁面元素

      進度條可應用于許多業務場景,如任務完成進度、loading等等,是一種較為直觀的表達元素。
      依賴加載組件:element




      我們進度條提供了兩種尺寸及多種顏色的顯示風格,其中顏色的選值可參考:背景色公共類。基本元素結構如下

      <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 時,即為大尺寸的進度條風格。默認風格的進度條的百分比如果開啟,會在右上角顯示,而大號進度條則會在內部顯示。

      如果你需要對進度條進行動態操作,如動態改變進度,那么你需要閱讀:element模塊

      layui - 用心與你溝通

      亚洲图色