<
面板
一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等 手风琴折叠面板 注意:“常规折叠面板”可以同时展开任意多个,但是“手风琴折叠面板”最多只能展示一个 另外:使用“手风琴折叠面板”相关的样式和方法“常规折叠面板”一模一样 相关属性 lay-accordion,直接写属性名即可,用于设置该面板为“手风琴折叠面板” 常规折叠面板 相关样式 layui-collapse 代表常规折叠面板 |- layui-colla-item 代表每一个卡片选项 |- layui-colla-title 用于设置卡片标题 |- layui-colla-content|layui-show 用于设置卡片展示内容|设置默认展示的内容 相关方法 用于监听面板的展开或收起状态 element.on('collapse(事件过滤器)', function(data){ layer.msg('展开状态:'+ data.show); }); 卡片面板 相关样式 layui-row 代表一行 |- layui-col-space0 -- layui-col-space30 设置面板之间的间距,取值越大,间距越大 |- layui-col-md0 -- layui-col-md12 代表每一个面板占用多少份,默认一行有12份 |- layui-card 代表每一个卡片选项 |- layui-card-header 代表卡片标题 |- layui-card-body 代表卡片展示内容
进度条
<
进度条:默认进度条的宽度和父元素一样宽! 常见样式 layui-progress 代表一个进度条 |- layui-progress-big 设置一个大进度条 |- layui-progress-bar 代表显示的进度 |- layui-bg-red 赤色 |- layui-bg-orange 橙色 |- layui-bg-green 墨绿 |- layui-bg-cyan 藏青 |- layui-bg-blue 蓝色 |- layui-bg-cyan 藏青 |- layui-bg-black 雅黑 如何实现自定义背景颜色??? a)新建一个css文件,在文本中定义好一个class选择器,然后设置好背景颜色 b)在需要使用该背景颜色的html文档中,引入css文件,然后再标签上面使用
常见属性 lay-percent="50%" 设置进度条的默认进度值 lay-showPercent="yes" 显示进度条的进度值
常见方法 动态设置进度值方法 语法:element.progress('事件过滤器', 进度值 + '%');
徽章
常见样式 layui-badge-dot 实心圆点徽章 layui-badge 常规弧形徽章 layui-badge-rim 边框徽章
<