進度條 - 頁面元素

                    進度條可應用于許多業務場景,如任務完成進度、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 - 用心與你溝通

                    亚洲图色