依赖于组件element
layui-card layui-card-header layui-card-body
image.png
<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
image.png
<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
- <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>
