uniGUI之主視窗折疊UI之UniTreeMenu(32-2)-有解無憂

用uniGUI專有控制元件TUniTreeMenu

2.0給TUniTreeMenu選單添加圖示

2.1給TUniTreeMenu選單添加事件

2.2修改背景色

2.3調整行高

2.4改變字體和大小

2.5改變選中項的前景色和滑鼠浮過某項的前景色

2] 用uniGUI專有控制元件TUniTreeMenu，類似標準控制元件的TreeView，還可以為每個選單增加圖示

2.0給TUniTreeMenu選單添加圖示

其中左邊的圖示：Font Awesome

[info]和[search],[home],[download],[trash],[refresh],[reply],[star],[user]有用，不是所有的都會顯示出來，不推薦使用Font Awesome

推薦使用 Pictos,圖示更全更多（[locate]顯示不出來）

2.1給TUniTreeMenu選單添加事件

2.1.1添加一個UniMenuItems1

2.1.2將UniTreeMenu1的SourceMenu設為UniMenuItems1

然后像普通的MainMenu操作UniMenuItems1，添加事件，選擇圖示

存在的問題

目前發現選單太多時右側不能自動出現滾動條，即太多的子選單將超出螢屏范圍，滑鼠滾輪不能翻動選單項，不太方便，如何解決呢？在UniTreeMenu的clientEvents屬性里的UniEvents里，左側頂部選擇Ext.list.Tree,然后在treeMenu.afterCreate里面添加代碼如下，即可解決，效果還不錯，

function treeMenu.afterCreate(sender)
{
    sender.el.setStyle('overflow-y', 'auto');
}

2.2修改背景色

2.3調整行高

加入

.x-treelist-nav .x-treelist-item-text {
     line-height: 30px;
}
 .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: 30px;
}

2.4類似地，同2.3改變字體和大小,在CustomCSS里加入

.x-treelist-nav .x-treelist-item-text {
     font-family:"楷體";
     font-size: 24px;
}

2.5改變選中項的前景色和滑鼠浮過某項的前景色

.x-treelist-nav .x-treelist-item-expanded {
    background-color: rgba(0,0,0,0) !important;
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row {
    background-color: rgba(0,0,255,0.80) !important;
}//選 中項的 前景色

.x-treelist-nav .x-treelist-row-over{
    background-color: rgba(255,0,0,0.20) !important;
}//滑鼠浮過某項的  前景色

.x-treelist-nav .x-treelist-toolstrip {
    background-color: rgba(0,0,0,0) !important;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/306.html

標籤：Delphi

上一篇：Delphi10.3的DBGrid美化(03)

下一篇：uniGUI學習之UniStringGrid(35)