uniGUI學習之自定義CSS(49)

uniGUI學習之uniButton設置圖標+扁平化CSS(34)    2]uniButton扁平化CSS  //自定義CSS在uniGUI  基本操作    控件CLS和ServerModule.CustomCSS都要修改CSS

uniGUI學習之UniStringGrid只某行內容的字體顏色(35)                                 //VCL屬性與 CSS 對應關系，         直接修改CSS

UniGUI學習之UniMemo行距控制(41)                                                            //修改默認uniGUI的CSS屬性 辦法，               僅ServerModule.CustomCSS修改CSS

uniGUI之主窗口折疊UI之UniTreeMenu(32-2)     2.3調整行高   2.4改變字體和大小   2.5改變選 中項的 前景色  和     鼠標浮過某項的  前景色 

---

uniGUI學習之uniButton設置圖標+扁平化CSS(34)    2]uniButton扁平化CSS

 

.bntAdd
{
   border-radius:0px;
   border: none;
   background:#4ca54c !important;
}

  雙擊右邊的ServerModule

 

回到主界面，在uniButton的LayoutConfig的Cls設為上面的bntAdd

 注意前面沒有點 號

---

 uniGUI學習之UniStringGrid只某行內容的字體顏色(35) 

procedure TMainForm.UniStringGrid1DrawCell(Sender: TObject; ACol, ARow: Integer;
  var Value: string; Attribs: TUniCellAttribs);
begin
// Attribs.Font.Color:=clred;    //等價於CSS里的//color: red;
// Attribs.Font.Size:=20;                     //font-size:  20px;
// Attribs.Font.Name:='楷體';                 //font-family: 楷體 ;
//  Attribs.Font.Style:=[fsBold, fsItalic];  //font-weight: bold; font-style: italic;

//等價於下面的CSS寫法

 Attribs.Style.Style := 'color: red; font-size:  20px; font-family: 楷體; font-weight: bold; font-style: italic;  !important';
//邊框及背景色 Attribs.Style.Style := 'border: 2px solid green;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;background-color: rgb(0,255,255) !important'   // 直接定義樣式，分號格開，但最后不要分號

end;

 

---

 UniGUI學習之UniMemo行距控制(41) 

.x-form-text-default  .x-form-textarea{  /*說明 這兩個屬性要同時修改*/
    line-height: 30px;
}

設置這個 line height就可以了

 注意前面沒有點  號

---

 uniGUI之主窗口折疊UI之UniTreeMenu(32-2)     2.3調整行高   2.4改變字體和大小   2.5改變選 中項的 前景色  和     鼠標浮過某項的  前景色

 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;
}

 

.x-treelist-nav .x-treelist-item-selected .x-treelist-row:before {
    background-color: #FFFF00 !important;
}/*選中項的左邊堅條的前景色*/