uniGUI学习之自定义CSS在Delphi里设置属性

现在名字可以起到这么长啊 發表於 2021-6-18 11:46:00

uniGUI学习之自定义CSS在Delphi里设置属性

uniGUI学习之uniButton设置图标+扁平化CSS(34)    2]uniButton扁平化CSS panel圆角 //自定义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改变选 中项的 前景色  和     鼠标浮过某项的  前景色 
                           通过JavaScript修改CSS
<hr>
uniGUI学习之uniButton设置图标+扁平化CSS(34)    2]uniButton扁平化CSS
 <img src="https://img2020.cnblogs.com/blog/37451/202005/37451-20200521180449595-788769608.png">
<div class="cnblogs_code">
<pre>.bntAdd
{
border-radius:0px;
border: none;
background:#4ca54c !important;
}</pre>
</div>
 类似地 ,panel圆角
<div class="cnblogs_code">
<pre>.panelAdd {
border: 2px solid red;
border-radius: 25px;
} </pre>
</div>
<img src="https://img2022.cnblogs.com/blog/37451/202207/37451-20220714200220428-1230720496.png"> 
双击右边的ServerModule
<img src="https://img2020.cnblogs.com/blog/37451/202106/37451-20210618143508379-77577864.png"> 
回到主界面，在uniButton的LayoutConfig的Cls设为上面的bntAdd
<img src="https://img2020.cnblogs.com/blog/37451/202106/37451-20210618144302066-212095403.png"> 注意前面没有点号
<hr>
 uniGUI学习之UniStringGrid只某行内容的字体颜色(35) 
<div class="cnblogs_code">
<pre>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:=;//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;</pre>
</div>
 
<hr>
 UniGUI学习之UniMemo行距控制(41) 
<div class="cnblogs_code">
<pre>.x-form-text-default.x-form-textarea{/*说明这两个属性要同时修改*/
line-height: 30px;
}</pre>
</div>
设置这个 line height就可以了
<img src="https://img2020.cnblogs.com/blog/37451/202106/37451-20210618171004712-1666807494.png"> 注意前面没有点  号
<hr>
 uniGUI之主窗口折叠UI之UniTreeMenu(32-2)     2.3调整行高   2.4改变字体和大小   2.5改变选 中项的 前景色  和     鼠标浮过某项的  前景色
 2.3调整行高
 <img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200414160602723-1738331329.png">
<div class="cnblogs_code">
<pre>.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;
}</pre>
</div>
<hr>
2.4类似地，同2.3改变字体和大小,在CustomCSS里加入
<div class="cnblogs_code">
<pre>.x-treelist-nav .x-treelist-item-text {
font-family:"楷体";
font-size: 24px;
}</pre>
</div>
 <img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200415150756929-489330004.png">
<hr>
2.5改变选 中项的 前景色  和     鼠标浮过某项的  前景色
<img src="https://img2020.cnblogs.com/blog/37451/202006/37451-20200603165158393-285040777.png"> 
<div class="cnblogs_code">
<pre>.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;
}</pre>
</div>
 <img src="https://img2020.cnblogs.com/blog/37451/202105/37451-20210507172945273-1180919745.png">
<div class="cnblogs_code">
<pre>.x-treelist-nav .x-treelist-item-selected .x-treelist-row:before {
background-color: #FFFF00 !important;
}/*选中项的左边坚条的前景色*/</pre>
</div>
<hr>
 通过JavaScript修改CSS
<img src="https://img2022.cnblogs.com/blog/37451/202207/37451-20220719182631313-52097151.png"> 
<div class="cnblogs_code">
<pre>procedure TMainForm.UniButton1Click(Sender: TObject);
begin
unisession.AddJS('Ext.get("'+ unipanel1.JSId+
'-body").setStyle({"background-color":"#37404e"})');
end;</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/37451/202401/37451-20240101105206105-1650451013.png">
<pre>*</pre> 
来源：https://www.cnblogs.com/tulater/p/14898915.html

頁: [1]

琼殿技术论坛's Archiver

uniGUI学习之自定义CSS在Delphi里设置属性