专栏首页sktjLayui 面板 panel

Layui 面板 panel

依赖于组件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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Layui form 表单(常用)

    layui-form div.layui-form-item label.layui-form-label div.layui-input-block

    用户5760343
  • bootstrap 面板 常用样式

    <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel...

    用户5760343
  • vue v-link

    <div id="app"> <nav class="navbar navbar-inverse"> <div class="container"> <d...

    用户5760343
  • .net mvc + layui做图片上传(一)

      图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块。关于这部分内容,本来功能不复杂,但后面做起来却还是出...

    CherishTheYouth
  • thymeleaf中使用layui

    头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板...

    小尘哥
  • layui修改 form表单的 长度

    地道小菜鸟
  • JFinal极速开发框架使用笔记(二) 两个问题,一个发现

    最近给新人出了一个小测试,我也用JFinal框架做了一下,记录一下使用过程中遇到的坑和新学到的知识点 首先是遇到的两个小问题, 一个是用最新版的eclipse运...

    二十三年蝉
  • 登录-Thinkphp5.1开发后台管理系统

    将config目录下的app.php文件(thinkphp5.1版本核心配置文件)内的路由配置项设置为开启状态;

    小白程序猿
  • Layui form 表单(常用)

    layui-form div.layui-form-item label.layui-form-label div.layui-input-block

    用户5760343
  • 2.布局解决方案- 等分<7>

    河湾欢儿

扫码关注云+社区

领取腾讯云代金券