搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

面板 - 页面元素

一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等
依赖加载组件:element
  • 效果
  • 代码
一个面板
一个面板

</>HTML

  1. <div class="layui-row layui-col-space15">
  2. <div class="layui-col-md6">
  3. <div class="layui-panel">
  4. <div style="padding: 30px;">一个面板</div>
  5. </div>
  6. </div>
  7. <div class="layui-col-md6">
  8. <div class="layui-panel">
  9. <div style="padding: 30px;">一个面板</div>
  10. </div>
  11. </div>
  12. </div>

提示:该功能为 layui 2.6.0 新增

卡片面板
卡片式面板面板通常用于非白色背景色的主体内
从而映衬出边框投影
卡片面板
结合 layui 的栅格系统
轻松实现响应式布局

对应的HTML结构code

  1. <div class="layui-card">
  2. <div class="layui-card-header">卡片面板</div>
  3. <div class="layui-card-body">
  4. 卡片式面板面板通常用于非白色背景色的主体内<br>
  5. 从而映衬出边框投影
  6. </div>
  7. </div>

如果你的网页采用的是默认的白色背景,不建议使用卡片面板。

杜甫

杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。

李清照

李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。

鲁迅

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板,element 模块会自动呈现状态图标。

对应的HTML结构code

  1. <div class="layui-collapse">
  2. <div class="layui-colla-item">
  3. <h2 class="layui-colla-title">杜甫</h2>
  4. <div class="layui-colla-content layui-show">内容区域</div>
  5. </div>
  6. <div class="layui-colla-item">
  7. <h2 class="layui-colla-title">李清照</h2>
  8. <div class="layui-colla-content layui-show">内容区域</div>
  9. </div>
  10. <div class="layui-colla-item">
  11. <h2 class="layui-colla-title">鲁迅</h2>
  12. <div class="layui-colla-content layui-show">内容区域</div>
  13. </div>
  14. </div>
  15. <script>
  16. //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
  17. layui.use('element', function(){
  18. var element = layui.element;
  19. //…
  20. });
  21. </script>

杜甫

杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。

李清照

李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。

鲁迅

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴,那么在进行折叠操作时,始终只会展现当前的面板。

对应的HTML结构code

  1. <div class="layui-collapse" lay-accordion>
  2. <div class="layui-colla-item">
  3. <h2 class="layui-colla-title">杜甫</h2>
  4. <div class="layui-colla-content layui-show">内容区域</div>
  5. </div>
  6. <div class="layui-colla-item">
  7. <h2 class="layui-colla-title">李清照</h2>
  8. <div class="layui-colla-content layui-show">内容区域</div>
  9. </div>
  10. <div class="layui-colla-item">
  11. <h2 class="layui-colla-title">鲁迅</h2>
  12. <div class="layui-colla-content layui-show">内容区域</div>
  13. </div>
  14. </div>

layui - 在每一个细节中,用心与你沟通