学习unigui【26】关于Unigui控件的个性化CSS框架

合集 - unigui(25)

1.unidbgrid的rowedit=true2022-09-062.unigui的demo-\Demos\Desktop\DBAppDemo\SimpleDemo.dproj【11】2021-05-313.unigui的session【1】2018-05-024.unigui菜单【3】2018-08-035.unigui的ini文件读写【6】2018-09-206.unigui导出TMS.Flexcel【5】2018-08-137.unigui+fastreport 打印【4】2018-08-118.unigui显示uniTreeVview使用TUniTreeNode内存泄漏的问题【14】2023-12-169.unigui显示websocket服务端向客户端发送信息【15】2023-12-2510.学习unigui【17】-数据集和JSON互相转换-DataSetConverter4D 开源项目2024-02-0111.学习unigui【18】unidbgrid的GridsGroupingSorting2024-02-0212.学习unigui【19】unidbgrid的Group By This Field汉化2024-02-0213.学习unigui【20】unistringGrid2024-02-2714.学习unigui【21】unistringGrid的标题栏动态增加2024-02-2915.学习unigui【22】unistringGrid的标题栏双击事件2024-03-0116.学习unigui【23】uniDBGrid的使用摘要2024-03-0917.学习unigui【25】关于图标2024-05-3018.学习unigui【24】Echart的使用：多个坐标系2024-04-20

19.学习unigui【26】关于Unigui控件的个性化CSS框架2024-05-31

20.学习unigui【27】像pg的jsonb一样编辑json。2024-06-0321.unigui的菜单树补习【2】treeview2018-08-0122.unigui的程序编译后自动运行傻傻的手动【7】2021-04-2823.unigui的ServerModule的重要属性【8】2021-04-2924.unigui的错误delphi clientHeight:property clientheight does not exist【10】2021-05-0325.学习unigui【28】UniGUI接收POST/GET2024-10-16

收起

用unigui写程序，简单的事用户界面不用HTML。因为这个太闹心了。没有什么技术含量，但很闹心。

但是，但是不清楚HTML CSS更闹心。因为养眼的界面是客户起步疑问和要求。

强烈推荐认真读明白大虾的体验和总结：delphi Unigui框架TUniContainerPanel 把CSS和界面属性对应起来后，明白怎么回事，这样就会顺手很多。所以赶紧补课HTML和CSS。

 转载如下：（如原作者有异议，请通知我删除）

TUniContainerPanel 相当于一个管理其子组件布局的一个容器。

 设置子组件的布局属性：

一般用到的：

 absolute: 预先定义的位置像素；

accordion: 手风琴样式布局多个面板，但是触发只能打开1个；

hbox: 水平布局；

vbox: 垂直布局；

 

这里是定义Css样式区域。

Padding: 设置容器内部子组件与容器的内边距。比如：50 12 0 50 上 右 下左

margin: 组件的外边距；

width: 组件的宽度，和css一样可用百分比表示；

height:组件的高度，和css一样可用百分比表示；

 

如何用Css去定义它的样式呢？

首先点击这个组件的元素，找到Layoutconfig布局配置，绑定它的标签

 

在ServerModule找到CustemCss

 

添加Css内容

.UniPanel4 {
  color: blue;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);/* 阴影 */
  transition: 0.3s;  /* 过渡 */
  border-radius: 20px; /* 5px圆角 */
  
}
.UniPanel4:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2);

}
.unpnl2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 20px; /* 5px圆角 */
  
}
.unpnl2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2);

}
.unpnl3 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 20px; /* 5px圆角 */
  
}
.unpnl3:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2);

}

看效果：