laytpl语法_layui语法基础

一.按钮区分

1.按照主题划分

原始：class = "layui-btn layui-btn-primary"

默认：class = "layui-btn"

百搭：class = "layui-btn layui-btn-normal"

暖色：class = "layui-btn layui-btn-warm"

警告：class = "layui-btn layui-btn-danger"

禁用：class = "layui-btn layui-btn-disabled"

2.按照大小划分

大型：class="layui-btn layui-btn-lg"

默认：class="layui-btn"

小型：class="layui-btn layui-btn-sm"

迷你：class="layui-btn layui-btn-xs"

3.设置圆角

class="layui-btn-radius"

4.按钮组

使用一个div来包裹需要设置的按钮，然后给该按钮添加class="layui-btn-group"

5.设置字体图标的方式

首先使用无语义化的内标签作为载体，然后给该div添加class="layui-icon",然后设置字体图标的方式有两种，分别是：①

②

二.选项卡

注：选项卡依赖于element模块，否则无法进行功能性操作。

1.相关样式

layui-tab 代表选项卡

|- layui-tab-brief 代表简洁风格的选项卡

|- layui-tab-card 代表卡片风格的选项卡

|- layui-tab-title 标题内容

|- layui-this 代表默认选中的标题

|- layui-tab-content 内容

|- layui-tab-item 每一个标题对应的内容

|- layui-show 设置默显示的内容，和layui-this配对

2.相关属性

lay-allowclose 设置是否支持关闭，值为true代表可以关闭，否则代表不关闭

lay-filter="xxx" 事件过滤器

lay-id="xxx" 类似于id属性，用于选中文档中的某一个选项卡条目

3.相关方法

添加选项卡

element.tabAdd("事件过滤器", {title, content, id})

删除选项卡

element.tabDelete("事件过滤器", "lay-id值")

切换选项卡

element.tabChange("事件过滤器", "lay-id值")

三.面板

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

1.手风琴折叠面板

注意：“常规折叠面板”可以同时展开任意多个，但是“手风琴折叠面板”最多只能展示一个另外：使用“手风琴折叠面板”相关的样式和方法“常规折叠面板”一模一样相关属性 lay-accordion，直接写属性名即可，用于设置该面板为“手风琴折叠面板”

2.常规折叠面板

相关方法用于监听面板的展开或收起状态 element.on('collapse(事件过滤器)', function(data){ layer.msg('展开状态：'+ data.show);

3.卡片面板

四.进度条

注：默认进度条宽度和父元素宽度一样宽。

1.常见样式

layui-progress 代表一个进度条

|- layui-progress-big 设置一个大进度条

|- layui-progress-bar 代表显示的进度

|- layui-progress-red 赤色

|- layui-bg-orange 橙色

|- layui-bg-green 墨绿

|- layui-bg-cyan 藏青

|- layui-bg-blue 蓝色

|- layui-bg-cyan 藏青

|- layui-bg-black 雅黑

2.常见属性

lay-percent="50%" 设置进度条的默认进度值 lay-showPercent="yes" 显示进度条的进度值

3.常见方法

动态设置进度值方法语法：element.progress('事件过滤器', 进度值 + '%');

补充：常见徽章样式：layui-badge-dot 实心圆点徽章 layui-badge 常规弧形徽章 layui-badge-rim 边框徽章

laytpl语法_layui语法基础相关推荐

python基础语法总结-Python基础语法总结之逻辑运算
Python里的逻辑运算有and.or 和 not,它们分别说明为与.或.非.虽然逻辑运算符在Python基础语法中是基础中的基础,但是对于零基础小白来讲,还是有一定难度的.本文就来为零基础小白好好讲 ...
Freemarker的基本语法及入门基础
freemarker的基本语法及入门基础一.freemarker模板文件(*.ftl)的基本组成部分 1. 文本:直接输出的内容部分 2. 注释:不会输出的内容,格式 ...
《英语语法新思维基础版2》读书笔记（一）
文章目录一.英语句子分析 1.1 主语+谓语动词(+状语) 1.2 主语+系动词+主语补足语(表语) 1.3 主语+谓语+宾语 1.4 主语+谓语+双宾语 1.5 主语+谓语+复合宾语 1.6 陈述 ...
Oracle、Mysql数据库编程开发基本操作命令语法脚本_基础篇(入门级)
Oracle.Mysql数据库开发基本操作命令语法脚本_基础篇(入门级) 文章目录 Oracle.Mysql数据库开发基本操作命令语法脚本_基础篇(入门级) 一.数据库中常用的字段类型二.操作数据库 ...
MarkDown语法浅析：基础语法篇
本篇学习笔记简述MarkDown基础语法.掌握了"MarkDown基本语法+简单HTML5标签"的综合运用,就可以把CSDN博文搞得美美哒✌ (本文获得CSDN质量评分[91]) ...
Java解析SQL生成语法树_Atitit.sql ast 表达式语法树语法解析原理与实现 java php c#.net js python...
Atitit.sql ast 表达式语法树语法解析原理与实现java php c#.net js python 1.1.Sql语法树ast如下图锁死 2.SQL语句解析的思路和过程 2.1.le ...
从零开始React：一档 React环境搭建，语法规则，基础使用
手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React,所以这次也使用ES6的模式进行教学,如果大家对ES6不熟悉的话,先 ...
python基础语法总结-Python基础语法精心总结！看完都知道的可以往下继续学习了...
这应该是最详细的Python入门基础语法总结! 定义变量,使用变量 input 用户自己输入值 print 打印值可以输出多个变量 %d|%s 用于输出变量时占位字符串(后期爬虫必备) int() ...
python编程基础语法-Python编程基础语法快速入门
1. 课程咨询加老师助理微信:助理1微信: chenjinglei88 ,助理2微信: omf6757 2. 决定购买并想得到陈敬雷老师亲自指导(课程或自己项目难题均可)加老师微信: chenjing ...

laytpl语法_layui语法基础

laytpl语法_layui语法基础相关推荐

最新文章

热门文章