Layui 面板 panel

用户5760343

发布于 2019-10-24 02:56:21

2.8K0

发布于 2019-10-24 02:56:21

文章被收录于专栏：sktjsktj

依赖于组件element

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

 <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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.10.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

accordion