225 次浏览【转载需注明来源】
博客作者:【qiang】
layui内置了面板组件,基础面板让当前元素更加突出,而折叠面板不仅让元素更加美观,还节约了大量的页面面积,在用于问答说明,帮助文档的时候,十分的好用。
用法十分的简单,下面是代码示例:
<区块 类名="lay-卡片面板"> <区块 行内样式="内边距: 20px 30px">我是一块白色的面板组件,这里可以写任何东西</区块> </区块> <区块 类名="lay-卡片面板"> <区块 类名="lay-卡片面板-头部">卡片面板</区块> <区块 类名="lay-卡片面板-主体"> 卡片式面板面板通常用于非白色背景色的主体内<换行 /> 从而映衬出边框投影 </区块> </区块> <区块 类名="lay-折叠面板"> <区块 类名="lay-折叠面板-项目"> <标题2 类名="lay-折叠面板-标题">折叠面板标题</标题2> <区块 类名="lay-折叠面板-内容 lay-显示"> <段落>折叠面板的内容。。。</段落> </区块> </区块> <区块 类名="lay-折叠面板-项目"> <标题2 类名="lay-折叠面板-标题">折叠面板标题</标题2> <区块 类名="lay-折叠面板-内容"> <段落>折叠面板的内容。。。</段落> </区块> </区块> </区块> <区块 类名="lay-折叠面板" lay-手风琴> <区块 类名="lay-折叠面板-项目"> <标题2 类名="lay-折叠面板-标题">手风琴折叠面板标题</标题2> <区块 类名="lay-折叠面板-内容 lay-显示"> <段落>手风琴折叠面板的内容。。。</段落> </区块> </区块> <区块 类名="lay-折叠面板-项目"> <标题2 类名="lay-折叠面板-标题">手风琴折叠面板标题</标题2> <区块 类名="lay-折叠面板-内容"> <段落>手风琴折叠面板的内容。。。</段落> </区块> </区块> </区块>
代码效果展示:
注意折叠面板的属性,lay-手风琴,可以让折叠面板变成手风琴面板。
点击此处跳转案例下载:点击下载lay-卡片面板操作实例
不能恶意举报,否则进行封号处理!
测试账号