一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等
依赖加载组件: element
一个面板一个面板
提示:该功能为 layui 2.6.0 新增
<div class="layui-card"> <div class="layui-card-header">卡片面板</div> <div class="layui-card-body"> 卡片式面板面板通常用于非白色背景色的主体内<br> 从而映衬出边框投影 </div> </div>
如果你的网页采用的是默认的白色背景,不建议使用卡片面板。
杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。
李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。
鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。
通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板,element 模块会自动呈现状态图标。
<div class="layui-collapse"> <div class="layui-colla-item"> <h2 class="layui-colla-title">杜甫</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">李清照</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">鲁迅</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> </div> <script> //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。
李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。
鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。
在折叠面板的父容器设置属性 lay-accordion 来开启手风琴,那么在进行折叠操作时,始终只会展现当前的面板。
<div class="layui-collapse" lay-accordion> <div class="layui-colla-item"> <h2 class="layui-colla-title">杜甫</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">李清照</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">鲁迅</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> </div>
layui - 在每一个细节中,用心与你沟通