面板 - 页面元素

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

依赖加载组件：element

卡片面板

面板 折叠 / 手风琴 - 图1

  1. <div class="layui-card">
  2.   <div class="layui-card-header">卡片面板</div>
  3.   <div class="layui-card-body">
  4.     卡片式面板面板通常用于非白色背景色的主体内<br>
  5.     从而映衬出边框投影
  6.   </div>
  7. </div>
  8.

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

折叠面板

面板 折叠 / 手风琴 - 图2

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

  1. <div class="layui-collapse">
  2.   <div class="layui-colla-item">
  3.     <h2 class="layui-colla-title">杜甫</h2>
  4.     <div class="layui-colla-content layui-show">内容区域</div>
  5.   </div>
  6.   <div class="layui-colla-item">
  7.     <h2 class="layui-colla-title">李清照</h2>
  8.     <div class="layui-colla-content layui-show">内容区域</div>
  9.   </div>
  10.   <div class="layui-colla-item">
  11.     <h2 class="layui-colla-title">鲁迅</h2>
  12.     <div class="layui-colla-content layui-show">内容区域</div>
  13.   </div>
  14. </div>
  15.  
  16. <script>
  17. //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  18. layui.use('element', function(){
  19.   var element = layui.element;
  20.  
  21.   //…
  22. });
  23. </script>
  24.

开启手风琴

面板 折叠 / 手风琴 - 图3

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

  1. <div class="layui-collapse" lay-accordion>
  2.   <div class="layui-colla-item">
  3.     <h2 class="layui-colla-title">杜甫</h2>
  4.     <div class="layui-colla-content layui-show">内容区域</div>
  5.   </div>
  6.   <div class="layui-colla-item">
  7.     <h2 class="layui-colla-title">李清照</h2>
  8.     <div class="layui-colla-content layui-show">内容区域</div>
  9.   </div>
  10.   <div class="layui-colla-item">
  11.     <h2 class="layui-colla-title">鲁迅</h2>
  12.     <div class="layui-colla-content layui-show">内容区域</div>
  13.   </div>
  14. </div>
  15.

layui - 用心与你沟通