DelphiFan Magazine

Top Menu

Main Menu

  • DELPHI
  • CODE SAMPLES
  • FIREMONKEY
  • DATABASE
  • RELEASES
  • VIDEOS
  • REVIEW
  • TECH NEWS

logo

DelphiFan Magazine

  • DELPHI
  • CODE SAMPLES
  • FIREMONKEY
  • DATABASE
  • RELEASES
  • VIDEOS
  • REVIEW
  • TECH NEWS
  • How to add a server application written in UNIGUI to startup?

  • UniGUI Expiry Link Anonymizer

  • UniGUI Add CAPTCHA to the WEB project

  • UniGui. Unique hybrid of Delphi and JS

  • How to transform a blob field into string lines (varchar) in SQL Firebird?

CODE SAMPLESDELPHI
Home›CODE SAMPLES›Customize the appearance of uniGUI TreeMenu

Customize the appearance of uniGUI TreeMenu

By admin
October 1, 2020
496
0
Share:

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!

Tagsdelphitreemenuuniguiunigui treemenuweb delphi
Previous Article

How to upgrade jquery uniGUI

Next Article

Tending to the Problem of the Missing ...

0
Shares
  • 0
  • +
  • 0
  • 0
  • 0
  • 0

admin

Related articles More from author

  • DELPHIRELEASES

    Bold for Delphi is Open Source

    September 21, 2020
    By admin
  • CODE SAMPLESDELPHIFIREMONKEY

    Using Android Vibration in Delphi

    December 10, 2020
    By admin
  • CODE SAMPLESDELPHI

    Use Windows API (WinCrypt) to calculate the MD5

    January 2, 2021
    By admin
  • CODE SAMPLESDELPHI

    Implementation of uniGUI login-free

    October 9, 2020
    By admin
  • CODE SAMPLESDELPHI

    How does Delphi handle different types of files

    November 19, 2020
    By admin
  • DELPHI

    Where to download OpenSSL binaries?

    January 3, 2021
    By admin

Leave a reply Cancel reply

You may interested

  • CODE SAMPLESDELPHIFIREMONKEY

    Copy text to clipboard in Firemonkey applications

  • CODE SAMPLESDELPHI

    Internationalizing your application in Delphi

  • FIREMONKEYRELEASES

    Critical Update Available For Delphi FireMonkey 10.4.1 On Android, IOS, OSX, Windows, And Linux

  • LATEST REVIEWS

  • TOP REVIEWS

Timeline

  • January 27, 2021

    How to add a server application written in UNIGUI to startup?

  • January 27, 2021

    UniGUI Expiry Link Anonymizer

  • January 26, 2021

    UniGUI Add CAPTCHA to the WEB project

  • January 26, 2021

    UniGui. Unique hybrid of Delphi and JS

  • January 13, 2021

    How to transform a blob field into string lines (varchar) in SQL Firebird?

Latest Comments

Find us on Facebook

Follow Us on Instagram

logo

Our website, law, laws, copyright and aims to be respectful of individual rights. Our site, as defined in the law of 5651 serves as a provider of space. According to the law, contrary to the law of site management has no obligation to monitor content. Therefore, our site has adopted the principle of fit and remove. Works are subject to copyright laws and is shared in a manner that violated their legal rights, or professional associations, rights holders who, adsdelphi@gmail.com I can reach us at e-mail address. Complaints considered to be infringing on the examination of the content will be removed from our site.

About us

  • 660 Pennsylvania Avenue Southeast #100 Washington, DC 20003
  • 0123456789
  • adsdelphi@gmail.com
  • Recent

  • Popular

  • Comments

  • How to add a server application written in UNIGUI to startup?

    By admin
    January 27, 2021
  • UniGUI Expiry Link Anonymizer

    By admin
    January 27, 2021
  • UniGUI Add CAPTCHA to the WEB project

    By admin
    January 26, 2021
  • UniGui. Unique hybrid of Delphi and JS

    By admin
    January 26, 2021
  • How to add a server application written in UNIGUI to startup?

    By admin
    January 27, 2021
  • Amazing Cross Platform Email App Sample In Delphi 10.4.1 FireMonkey For Android And IOS

    By admin
    August 13, 2020
  • Critical Update Available For Delphi FireMonkey 10.4.1 On Android, IOS, OSX, Windows, And Linux

    By admin
    September 4, 2020
  • Setting up the IDE for your first Android Application in Delphi

    By admin
    September 7, 2020

Follow us

Find us on Facebook

© Copyright Delphifan Forum. All rights reserved.