当前博客:28-快码FOF中文编程layui教学-组件:面板

225 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

layui内置了面板组件,基础面板让当前元素更加突出,而折叠面板不仅让元素更加美观,还节约了大量的页面面积,在用于问答说明,帮助文档的时候,十分的好用。

用法十分的简单,下面是代码示例:

<区块 类名="lay-卡片面板">
	<区块 行内样式="内边距: 20px 30px">我是一块白色的面板组件,这里可以写任何东西</区块>
</区块>
<区块 类名="lay-卡片面板">
	<区块 类名="lay-卡片面板-头部">卡片面板</区块>
	<区块 类名="lay-卡片面板-主体">
		卡片式面板面板通常用于非白色背景色的主体内<换行 />
		从而映衬出边框投影
	</区块>
</区块>
<区块 类名="lay-折叠面板">
	<区块 类名="lay-折叠面板-项目">
		<标题2 类名="lay-折叠面板-标题">折叠面板标题</标题2>
		<区块 类名="lay-折叠面板-内容 lay-显示">
			<段落>折叠面板的内容。。。</段落>
		</区块>
	</区块>
	<区块 类名="lay-折叠面板-项目">
		<标题2 类名="lay-折叠面板-标题">折叠面板标题</标题2>
		<区块 类名="lay-折叠面板-内容">
			<段落>折叠面板的内容。。。</段落>
		</区块>
	</区块>
</区块>
<区块 类名="lay-折叠面板" lay-手风琴>
	<区块 类名="lay-折叠面板-项目">
		<标题2 类名="lay-折叠面板-标题">手风琴折叠面板标题</标题2>
		<区块 类名="lay-折叠面板-内容 lay-显示">
			<段落>手风琴折叠面板的内容。。。</段落>
		</区块>
	</区块>
	<区块 类名="lay-折叠面板-项目">
		<标题2 类名="lay-折叠面板-标题">手风琴折叠面板标题</标题2>
		<区块 类名="lay-折叠面板-内容">
			<段落>手风琴折叠面板的内容。。。</段落>
		</区块>
	</区块>
</区块>
Markup

代码效果展示:

注意折叠面板的属性,lay-手风琴,可以让折叠面板变成手风琴面板。

 

点击此处跳转案例下载:点击下载lay-卡片面板操作实例

28-快码FOF中文编程layui教学-组件:面板