Yus框架之nl子级管控指令

2023-12-07 11:50
文章标签 框架 指令 管控 子级 nl yus

本文主要是介绍Yus框架之nl子级管控指令,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

语法1

.nl-className
.nl-[class1_class2_class3]

实例1

<ul class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10 uc-bg-f00]"><li>子</li><li>级</li><li>管</li><li>控</li>
</ul>

运行效果1

详细解释1

1、nl-class1 nl-class2,即给子元素添加class1 class2样式。

2、nl-[class1 class2 class3],需要一次添加多个样式时,可以使用方括号框将它们起来;另外,如果需要us-h-50 uc-c-f00这样的yus样式作用到子级元素,也需要使用方括号框起来。

3、nl-[class1_class2_class3],上一条中 class2 前后都有空格,这将会被浏览器判断为一个样式,作用在子级的同时,也会对父级产生影响。如果只希望影响子级元素时,可以用下划线来代替空格,即可解决问题。

语法2

.nl-className-dom
.nl-[class1_class2_class3]-dom

实例2

<ul class="test"><li>子</li><li>级</li><li>管</li><li>控</li>
</ul>
<i class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10 uc-bg-f00]-test !hidden"></i>

运行效果2

详细解释2

1、与实例1的效果相同,但是代码更简洁了一些,由于某些伪道学所提倡的那样,在html页面中不要写太多style css代码,看起来不好看。

2、利用nl-[class1 class2 class3]-dom指令,可以将庞杂的代码统一放在页面最底部,这样就可以在上面看class名称,到下面去找class对应的样式了,更加便于阅读理解;当然了,多数编辑器或脚手架按ctrl键,点击样式名称时,可以直接定位到对应的css文件中去,那样其实也挺方便的。

3、当然,我们也可以利用yus框架的《include指令》,将这些样式包含在另外一个页面中,只是需要注意的是yus的include指令是异步的,所以如果有相关的js代码也要放在include页面中,以免产生错误。

4、代码中的 hidden 是 yus《内置样式》,前面加一个感叹号,表式强制模式,毕竟这一部分是不希望显示在页面中的,其实可以在页面中放置一个隐藏区域,将所有这些都放在里面。

5、注:include功能已完善,语法是这样审儿滴:<include src="filename.html"></include>,说明文档正在整理当中,后续将放出。

语法3

.nl-className-筛选器
.nl-[class1_class2_class3]-筛选器

实例3

<ul class="test nl-[uc-bg-f00]-odd nl-[uc-bg-00f]-even"><li>子</li><li>级</li><li>管</li><li>控</li>
</ul>
<i class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10]-test !hidden"></i>

运行效果3

详细解释3

1、解释就不解释了,放一个表格自行体会吧。

NL指令说明

项目

描述

nl

声明子级管制指令

className

[样式集]

className:一般情况下,给子级元素添加一个样式名称直接写 className 即可,如果赋多个样式,最好使用方括号 [ ] 框起来。

[样式集]:需要说明的是,方括号 [ ] 中间的样式集,两个样式之间的空格,最好用下划线 “_” 代替;短横线 “-” 在必要的情况下,可以使用竖线“|”代替。因为,我们的目的是给其它元素添加样式,而不是将这些样式作用于自身,如:nl-[b red ac]-tag,由于使用了空格,中间的 red 样式就会对当前元素生效。

dom

可选项

dom为空,样式集直接作用于当前对象的子元素。

dom不为空,dom代表目标对象名称,样式集作用于dom对象的子级。

筛选器

可选项

odd:当前对象奇数子元素。

even:偶数子元素。

number:第一个子元素1,第二个2,以此类推。

3n:每3个元素间隔。

3n+2:从第2个子元素开始,每3个元素间隔。

.clear

在子级元素中添加clear类,可以清除nl-指令的效果。

这篇关于Yus框架之nl子级管控指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/465767

相关文章

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Python GUI框架中的PyQt详解

《PythonGUI框架中的PyQt详解》PyQt是Python语言中最强大且广泛应用的GUI框架之一,基于Qt库的Python绑定实现,本文将深入解析PyQt的核心模块,并通过代码示例展示其应用场... 目录一、PyQt核心模块概览二、核心模块详解与示例1. QtCore - 核心基础模块2. QtWid

Nginx指令add_header和proxy_set_header的区别及说明

《Nginx指令add_header和proxy_set_header的区别及说明》:本文主要介绍Nginx指令add_header和proxy_set_header的区别及说明,具有很好的参考价... 目录Nginx指令add_header和proxy_set_header区别如何理解反向代理?proxy

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统

Python结合Flask框架构建一个简易的远程控制系统

《Python结合Flask框架构建一个简易的远程控制系统》这篇文章主要为大家详细介绍了如何使用Python与Flask框架构建一个简易的远程控制系统,能够远程执行操作命令(如关机、重启、锁屏等),还... 目录1.概述2.功能使用系统命令执行实时屏幕监控3. BUG修复过程1. Authorization

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依

MyBatis框架实现一个简单的数据查询操作

《MyBatis框架实现一个简单的数据查询操作》本文介绍了MyBatis框架下进行数据查询操作的详细步骤,括创建实体类、编写SQL标签、配置Mapper、开启驼峰命名映射以及执行SQL语句等,感兴趣的... 基于在前面几章我们已经学习了对MyBATis进行环境配置,并利用SqlSessionFactory核