《layui宇宙版教程》：面板

最新推荐文章于 2023-07-05 15:23:52 发布
最新推荐文章于 2023-07-05 15:23:52 发布
阅读量267 收藏 1
点赞数
分类专栏： Layui宇宙版教程 文章标签： layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ghyghost/article/details/108094926
版权

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

 

1.12 面板

面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于QA说明、帮助文档等等。

依赖加载组件：element。

1.12.1 卡片面板

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

       <title>layout 后台大布局 - Layui</title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <div style="padding: 5px;background-color: #cccccc;" class="layui-row layui-col-space5">

           <div class="layui-col-md6">

              <div class="layui-card">

                  <div class="layui-card-header">卡片面板</div>

                  <div class="layui-card-body">

                     卡片式面板面板通常用于非白色背景色的主体内<br>

                     从而映衬出边框投影

                  </div>

              </div>

           </div>

           <div class="layui-col-md6">

              <div class="layui-card">

                  <div class="layui-card-header">卡片面板</div>

                  <div class="layui-card-body">

                     卡片式面板面板通常用于非白色背景色的主体内<br>

                     从而映衬出边框投影

                  </div>

              </div>

           </div>

       </div>

       <script src="layui/layui.all.js"></script>

       <script>

           var element = layui.element;

           var form = layui.form;

           form.render();

       </script>

    </body>

</html>

 

    运行结果如图1-xx所示。

 

如果网页采用白色做为背景，不建议使用卡片面板。

1.12.2 折叠面板

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

 

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

       <title>layout 后台大布局 - Layui</title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <div class="layui-collapse">

           <div class="layui-colla-item">

              <h2 class="layui-colla-title">杜甫</h2>

              <div class="layui-colla-content layui-show">内容区域1</div>

           </div>

           <div class="layui-colla-item">

              <h2 class="layui-colla-title">李清照</h2>

              <div class="layui-colla-content layui-show">内容区域2</div>

           </div>

           <div class="layui-colla-item">

              <h2 class="layui-colla-title">鲁迅</h2>

              <div class="layui-colla-content">内容区域3</div>

           </div>

       </div>

       <script src="layui/layui.all.js"></script>

       <script>

           var element = layui.element;

           var form = layui.form;

           form.render();

       </script>

    </body>

</html>

 

    运行结果如图1-xx所示。

 

1.12.3 开启手风琴

在折叠面板的父容器设置属性lay-accordion来开启手风琴风格，在进行折叠操作时，始终只会展现当前选中的面板，其它面板呈隐藏的状态。

 

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

       <title>layout 后台大布局 - Layui</title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

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

       <script src="layui/layui.all.js"></script>

       <script>

           var element = layui.element;

           var form = layui.form;

           form.render();

       </script>

    </body>

</html>

 

    运行结果如图1-xx所示。

 

立志做一个佳娃~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui一行并排两个卡片面板小记
y5706745的博客
03-17 2374
工作上遇到要使用卡片面板的页面，且一行并排两个，效果图如下：
《layui宇宙版教程》：数据表格table-1
来吧，学习！
08-20 433
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.23 数据表格table 注意：根据使用上的经验，建议不要把数据表格做为服务端分页的”前端复杂界面设计”的解决方案。当对数据表格进行自定义定制时，由于Layui框架中table模块可定制性不良的原因，也就是过度封装，有可能在复杂界面的实现上并不是太方便，还得自己添加javascript和css代码，建议使用普通table表格结合自写代码来实现分页，这样的高度可...
《layui宇宙版教程》：辅助
来吧，学习！
08-19 266
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.16 辅助 本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块。 1.16.1 引用区块 示例代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
layui框架学习（5：面板）
gc_2299的博客
01-31 1778
学习并记录layui框架中页面元素的面板相关内容。
《layui宇宙版教程》：表单
来吧，学习！
08-16 372
1.8 表单 在一个容器中设置class="layui-form"来标识一个表单元素块，通过规范好的HTML结构及CSS类来组装成各式各样的表单元素，并通过内置的form模块来完成各种交互。 必须要加载form模块。请注意：如果使用layui.js并且不加载form模块，则select、checkbox、radio等组件将无法显示，呈隐藏状态，并且无法使用form相关功能，可以使用如下代码加载form模块： <script> layui.use('form', fu...
LayUI中的基本元素之面板
daimeijin的博客
08-13 1787
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 面板 一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等 常规面板 <div class="layui-row layui-col-
卡片式层面板
04-21
对卡片布局管理，以及程序外观观感的应用。
Layui面板
AturboS的博客
07-27 956
说起面板相信大家都很陌生，但面板离我们日常做的页面非常接近也经常使用； 首先在VS中创建页面然后添加视图进入跟DW基本一样的HTML页面； 卡片面板：卡片式面板面板通常用于非白色背景色的主体内从而映衬出边框投影，结合 layui 的栅格系统轻松实现响应式布局； 4、折叠面板；通过对内容元素设置class为layui-show来选择性初始展开某一个面板，element 模块会自动呈现状态图标； 5、折叠面板它是一个隐藏的文本，它只显示单单一个标题，然后标题隐藏了所有，...
Layui页面元素之选项卡、进度条、面板、表格 、徽章、时间线、辅助元素
尽力漂亮的博客
05-06 871
Layui页面元素之选项卡、进度条、面板、表格 、徽章、时间线、辅助元素效果demo 选项卡、面板、时间线很重要 效果 demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui页面元素之选项卡、进度条、面板、表格 、徽章、时间线、辅助元素&l...
layui框架卡片面板的使用
热门推荐
DSRCCSDN的博客
12-18 1万+
写在前面 在之前的博客中我有写过关于layui的form的布局，具体详情请点击此处，其实这一篇博客讲得不是很全，因为绝大部分时候，form表单通常都会配合面板使用，这样的布局更加美观，而且排序也十分简单。因此博主强烈推荐面板配合form来使用。 卡片面板 在大多数时候，卡面面板就能满足我们的需求，本篇只谈卡片面板，更多用法请移步到layui面板文档 第一步，引用layui.css和layui.js...
layui的基本元素之一-----面板
water_java的博客
08-29 4979
layui的基本元素之一-----面板卡片面板折叠面板手风琴面板面板嵌套 卡片面板 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>卡片面板</legend> </fieldset> <!-- 卡片式...
前端框架Layui学习二：面板、布局、徽章、时间线、颜色选择器
zhengzaifeidelushang的博客
07-14 1556
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。
《layui宇宙版教程》：Layui介绍
来吧，学习！
08-16 520
1.1 Layui介绍 Layui是经典的模块化前端框架，由职业前端资深工程师倾情打造，面向全层次的前后端开发者和低门槛开箱即用的前端UI解决方案。 Layui是采用模块化规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，学习门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻巧，组件丰富，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。 Layui首个版本发布于2016年金秋，她更多是为服务端程序员量身定做，无需涉足各种前端工具的复杂配置，只需面对浏
card样式 layui_layui样式修改
weixin_39973196的博客
12-22 1687
增加table表格行高：整个表格样式行高修改.layui-table-cell {height: auto;line-height: 30px;}修改按钮样式//增加//修改//删除layui列表点击事件event{field: 'status',title: '状态', event: 'changeStatus',templet: '#statusTpl', align: 'center'...
关于layui实现按钮点击添加行的功能
最新发布
qq_46524280的博客
07-05 2440
关于layui实现按钮点击添加行的功能 实现效果 代码实现 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" th:href="@{/plugin/layui/css/la
layui框架学习（7：选项卡样式）
gc_2299的博客
02-19 1103
学习并记录layui框架中页面元素的选项卡相关样式设置方式。
card样式 layui_layui后台模板
weixin_39721000的博客
12-22 988
X-admin简介X-admin基于layui的轻量级前端后台管理框架，简单免费，兼容性好，面向所有层次的前后端程序。创立于2017年初，为了敏捷WEB应用开发和简化企业应用开发而诞生的。#X-admin从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国...
layui01
无区新手的博客
06-07 394
雷哥整理 概述 下载：https://www.layui.com/ 下载文件说明 css 样式 font:字体 image:图片 lay: |--models layui.all.js 包含了所有模块的js layui.js 框架 如果要使用必须使用layui.use(["table","layer","laydate","form"],function(){}) 学习的内容 图标 按钮 导航菜单 选项卡 进度条 面板+布局 徽章 时间...
《Layui宇宙版教程》：全面解析600页框架实战
"Layui宇宙版教程 version1.6.pdf 是一本详尽的前端框架Layui教程，由高洪岩编著，包含了600多页的内容，覆盖了Layui官网98%的DEMO，旨在帮助用户快速理解和应用Layui，提升开发效率。教程提供了一个2000人的QQ群...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值