📖 正文内容
面板 - 页面元素
一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等
依赖加载组件：element
- 效果
- 代码
一个面板
一个面板
提示：该功能为 layui 2.6.0 新增
卡片面板
卡片式面板面板通常用于非白色背景色的主体内
从而映衬出边框投影
从而映衬出边框投影
卡片面板
结合 layui 的栅格系统
轻松实现响应式布局
轻松实现响应式布局
对应的HTML结构code
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 卡片式面板面板通常用于非白色背景色的主体内<br>
- 从而映衬出边框投影
- </div>
- </div>
如果你的网页采用的是默认的白色背景，不建议使用卡片面板。
杜甫
杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。
李清照
鲁迅
通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。
对应的HTML结构code
- <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 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。
对应的HTML结构code
- <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 - 在每一个细节中，用心与你沟通
💬 评论交流
这个技巧很实用，感谢分享！