Layui 面板 panel

依赖于组件element

layui-card layui-card-header layui-card-body

代码语言：javascript复制

 <div class="layui-card">
 <div class="layui-card-header">卡片面板</div>
 <div class="layui-card-body">
 卡片式面板面板通常用于非白色背景色的主体内
 从而映衬出边框投影
 </div>
 </div>

折叠面板

div.layui-collapse layui-colla-item layui-colla-title layui-colla-content

代码语言：javascript复制

<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>

手风琴式:accordion

代码语言：javascript复制

<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>

accordion element header layui title

0 人点赞