009-面板

最新推荐文章于 2024-04-16 04:56:18 发布

原创最新推荐文章于 2024-04-16 04:56:18 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

layui学习专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何在layui中使用折叠面板和卡片面板，包括各自的结构、样式和实例，重点讲解了如何节省页面空间和定制初始状态。

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. 效果图