定制uniGUI TreeMenu外观

摘要:
/*设置TreeMenu字体*/。x树列表-名称。x-treelist-item-text{font-family:}/*设置树菜单行高度*/。x树列表-名称。x-treelist-item-text{行高度:}。x树列表-名称。x-treelist-item-icon:

现在的版本提供了uniTreeMenu,可以制作流行的菜单树,如下图:

定制uniGUI TreeMenu外观第1张

功能方面还需要进一步增强,我遇到进一步定制字体、字号、及行高的问题,解决方法如下:

/*设置TreeMenu字体*/
.x-treelist-nav .x-treelist-item-text {
     font-family:"微软雅黑";
     font-size: 14px;
}
/*设置TreeMenu行高*/
.x-treelist-nav .x-treelist-item-text {
     line-height: 40px;
}
 .x-treelist-nav .x-treelist-item-icon:before, .x-treelist-nav .x-treelist-item-tool:before, .x-treelist-nav .x-treelist-item-expander {
     line-height: 40px;
}

在uniServerModule的CustomCSS中加入上面的代码。

这个方法在uniGUI 1.9.1534中正常,但是这样定义,是定义全局的,也就是说,所有的TreeMenu或者用css中定义的属性内容的其他控件也会受到影响。

如果只想为指定的TreeMenu控件用上面的内容呢?现在,我们改变一下定义,加上自己的前缀:

/*设置TreeMenu字体*/
.kls-treemenu .x-treelist-nav .x-treelist-item-text {
     font-family:"微软雅黑";
     font-size: 14px;
}
/*设置TreeMenu行高*/
.kls-treemenu .x-treelist-nav .x-treelist-item-text {
     line-height: 40px;
}
.kls-treemenu .x-treelist-nav .x-treelist-item-icon:before, .x-treelist-nav .x-treelist-item-tool:before, .x-treelist-nav .x-treelist-item-expander {
     line-height: 40px;
}

看上面的代码,我加了.kls-treemenu,现在,我们为主窗口的TreeMenu指定使用这里具体定义的css:

定制uniGUI TreeMenu外观第2张

 uniTreeMenu1.LayoutConfig.ComponentCls:='kls-treemenu',注意,这里没有“.”,即这里没有点。我就犯了错误,还跑问朋友太叔,怎么回事?

期待官方的改进,不用这样来定义TreeMenu的外观。

参考:https://www.cnblogs.com/tulater/archive/2020/04/14/12698860.html#a20

当菜单项目多时,没有滚动条,用下面的方法:

/*设置TreeMenu字体*/
.kls-treemenu .x-treelist-nav .x-treelist-item-text {
     font-family:"微软雅黑";
     font-size: 14px;
     /*显示滚动条*/
     overflow-y:auto
}

朋友说用代码也可以实现:

定制uniGUI TreeMenu外观第3张

 在火车上发来的截图,我还没有试,不过,他说这样,还可以变成控件的属性。是个好方法,先记录到这里了。

 默认情况下,点击一级菜单的文字,是不显示二级菜单的,只能点击右边向下的箭头。用户提出这样不好,那怎么一点一级就显示二级呢?朋友告诉我,这个属性可以控制:

定制uniGUI TreeMenu外观第4张

  一试,果真好用,感谢朋友支持!

 

免责声明:文章转载自《定制uniGUI TreeMenu外观》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇php 常量unity内置shader下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

C#系列之聊聊.Net Core的InMemoryCache

个人博客:http://www.boydwang.com/2017/12/net-core-in-memory-cache/ 这两天在看.net core的in memory cache,这里记录一下用法,主要涉及MemoryCache的Get/Set/Expire/Flush。首先我们先用dotnet命令创建一个mvc的项目,这里我们将使用post...

JSP基础知识➣获取参数和过滤器(四)

JSP表单提交和参数获取   JSP表单提交的两种方式:post和get,通过这两种方式提交的参数到后台,获取参数的值主要由request来处理,获取值的方式有以下几种: getParameter(): 使用 request.getParameter() 方法来获取表单参数的值。 getParameterValues(): 获得如checkbox类(名字...

OpenCV4学习笔记(3.0)官方教程 | Load, Modify, and Save an Image 加载、修改和保存图像

本篇博客的主要内容是对官方OpenCV教程的翻译、总结与理解,并记录自己在学习过程中的心得体会。 官方教程地址:https://docs.opencv.org/4.3.0/db/d64/tutorial_load_save_image.html 阅读这篇博客之前,需要先掌握a如何使用cv::imread来读取图像和使用cv::imshow来显示图像,这...

视图家族之视图工具集viewsets

视图家族之视图工具集viewsets 一、视图集ViewSet 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update() 保存数据 destory() 删除数据 ViewSet视图集类不再实现get()、post()等方法,而是通过重...

spring事务注解@Transactional不生效、不回滚原因

一般情况下在方法上直接添加@Transactional即可,但是极有可能会达不到我们想要的效果,这时就需要添加相应的参数,参数如下。 @Transactional(propagation=Propagation.REQUIRED) //控制事务传播。默认是Propagation.REQUIRED  @Transactional(isolation=Iso...

在Eclipse中使用JUnit4进行单元测试(图文教程一)

在Eclipse中使用JUnit4进行单元测试    单元测试,JUnit4。    这两个有什么关系呢?这就好比(草)单元测试和(割草机)。用这个JUnit4工具去辅助我们进行测试。其实不理解这个也没关系,听多了见多了用多了,自然而然地就会懂了。    有人可能会想,那我直接自己编写个测试的方法不就可以了。例如写个System.out.print输出,看...