The current version provides uniTreeMenu, which can make popular menu trees, as shown below:

The function needs to be further enhanced. I encountered the problem of further customizing the font, font size, and line height. The solution is as follows:

*Set the TreeMenu font*/
.x-treelist-nav .x-treelist-item-text {
font-family:”Arial”;
font-size: 14px;
}
/*Set TreeMenu row height*/
.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;
}

Add the above code in CustomCSS of uniServerModule.

This method is normal in uniGUI 1.9.1534, but this definition is defined globally, that is, all TreeMenu or other controls that use the attribute content defined in css will also be affected.

What if you only want to use the above content for the specified TreeMenu control? Now, let’s change the definition and add our own prefix:

/*Set TreeMenu font*/
.kls-treemenu .x-treelist-nav .x-treelist-item-text {
font-family:”Roboto”;
font-size: 14px;
}
/*Set TreeMenu row height*/
.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;
}

Looking at the code above, I added .kls-treemenu. Now, we specify the CSS specifically defined here for the TreeMenu of the main window:

uniTreeMenu1.LayoutConfig.ComponentCls:=’kls-treemenu’, note that there is no “.” here, that is, there is no point here. I made a mistake and asked my friend’s uncle what happened?

Looking forward to the official improvement, there is no need to define the appearance of TreeMenu in this way.

When there are many menu items and there is no scroll bar, use the following method:

/*Set TreeMenu font*/
.kls-treemenu .x-treelist-nav .x-treelist-item-text {
font-family:”Roboto”;
font-size: 14px;
/*Display scroll bar*/
overflow-y:auto
}

My friend said that it can be achieved with code:

I haven’t tried the screenshots sent on the train, but he said that it can also become a property of the control. It’s a good way, let’s record it here first.

By default, clicking the text of the first-level menu will not display the second-level menu. You can only click the down arrow on the right. The user suggests that this is not good, so how can one point show the second level? A friend told me that this attribute can be controlled:

Give it a try, it’s really easy to use, thank friends for your support!