进度条 progress

2024-06-24 15:04| 来源: 网络整理| 查看: 265

进度条

进度条 progress 可应用于许多业务场景，如任务完成进度、loading 等等。

示例

进度条宽度是 100% 适配于它的父级元素，如上面的进度条是在一个 300px 的父容器中。

进度条主题大号进度条

通过对进度条容器追加 className 为 layui-progress-big 可设置大尺寸风格的进度条。

显示进度值 API API 描述 var element = layui.element 获得 element 模块。 element.render('progress', filter) 进度条 progress 组件渲染。 element.progress(filter, percent) 设置进度值渲染

element.render('progress', filter);

参数 'progress' : 渲染进度条的固定值参数 filter : 对应进度条容器 lay-filter 的属性值

在元素加载完毕后，element 模块会自动对元素进行一次渲染。而当元素为动态插入时，需通过该方法完成初始化渲染。

layui.use(function(){ var element = layui.element; var $ = layui.$; // 动态插入进度条元素 $('#test').html(` `); // 渲染进度条组件 element.render('progress', 'demo-filter-progress'); }); 属性属性描述 lay-percent 用于设置进度条的值，进度条内层容器属性。支持百分比和分数形式。用法详见：#示例 lay-showpercent 是否显示进度值，进度条外层容器属性，默认不显示。用法详见：#示例设置进度值

element.progress(filter, percent);

参数 filter : 对应进度条容器 lay-filter 的属性值参数 'percent' : 进度条的值

该方法用于动态改变进度条的值。示例：

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章