1. 一般的面板通常是指一个独立的容器, 而折叠面板则能有效地节省页面的可视面积, 非常适合应用于: QA说明、帮助文档等。
2. 面板依赖加载组件: element。
3. 卡片面板
3.1. 卡片面板使用
名称 |
组合 |
卡片面板容器 |
class="layui-card" |
卡片面板头部 |
class="layui-card-header" |
卡片面板内容 |
class="layui-card-body" |
3.2. 如果你的网页采用的是默认的白色背景, 不建议使用卡片面板。
3.3. 实例
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>
4. 折叠面板
4.1. 折叠面板使用
名称 |
组合 |
折叠面板容器 |
class="layui-collapse" |
折叠面板项目 |
class="layui-colla-item" |
折叠面板标题 |
class="layui-colla-title" |
折叠面板内容 |
class="layui-colla-content" |
4.2. 通过对内容元素设置class为layui-show来选择性初始展开某一个面板, element模块会自动呈现状态图标。
4.3. 在折叠面板的父容器设置属性lay-accordion来开启手风琴, 那么在进行折叠操作时, 始终只会展现当前的面板。
4.4. 实例
<h1>折叠面板</h1>
<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>
<h1>开启手风琴</h1>
<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">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content">内容区域</div>
</div>
</div>
5. 例子
5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>面板 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>
<h1>折叠面板</h1>
<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>
<h1>开启手风琴</h1>
<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">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content">内容区域</div>
</div>
</div>
<script type="text/javascript">
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
5.2. 效果图