首页 > 其他分享 >学习unigui【26】关于Unigui控件的个性化CSS框架

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

时间:2024-05-31 10:32:33浏览次数:26  
标签:box 控件 26 0.2 rgba 组件 shadow CSS

用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);

}

看效果:

 

标签:box,控件,26,0.2,rgba,组件,shadow,CSS
From: https://www.cnblogs.com/usegear/p/18223970

相关文章

  • Winform 知道一个窗体的句柄,如何获取这个窗体,并添加控件
    Winform知道一个窗体的句柄,如何获取这个窗体,并添加控件varfrm=(Control)Form.FromHandle(h);h为句柄,我这里强转成control了,你可以自己看情况改动我原来写过一个例子,调用cmd.exe窗口,并嵌入到自己的窗体内,你可以参考一下usingSystem;usingSystem.Collections;usingSy......
  • 【介绍下SCSS的基本使用】
    ......
  • P2266 爱的供养题解
    题目大意给你一个矩阵$w$,大小为$n\timesm$,然后你每次都从一个宝藏点开始去走旁边$T-1$个点施法,施法过的点就不用再走了,施法不需要耗费体力但是每一次从一个点走到另一个点需要耗费的权值为这两个点的高度差,你每次可以走的方向是上下左右。求最小需要耗费的体力。......
  • P10526 [XJTUPC2024] 命令行题解
    题目大意对于一个字符串$s$在输入的最后一行读入的字符,如个字符不为$E\(,\)T\(,\)B$那么这一个字符就添加至字符串$s$的末尾。对于操作$B$那么执行删除字符串$s$的最后一个字符,如果$s$为空那么跳过这个操作。对于操作$T$找到一个以字符串......
  • html+css
    一.什么是htmlhtml是超文本语言,也是标识语言二.html特点1.简易性2.可拓展性3.平台无关性4.通用性三.html标签标题标签到6个等级标题h1最大段落标签(1) 空格(必须手打)(2)em标签表示斜体(3)i标签表示斜体(4)br表示换行(5)b标签表示加粗(6)strong标签表示加粗(7)s标......
  • BEM规范 电商订单模块UI设计实战-- CSS篇(一)
    BEM规范|电商订单模块UI设计实战--CSS篇(一)引言我最近专注于JavaScript的学习,暂时搁置了CSS。然而,我偶然发现了BEM(BlockElementModifier)命名规范,并且注意到我们日常使用的微信界面UI遵循了这一规范。虽然看起来有些杂乱,但这是WeUI的一部分,展示了众多组件。这让我思......
  • ant design vue a-date-picker 控件问题
    遇见a-date-picker控件回显,不操作再保存报错问题,后台是date类型会报下面这个错误Fielderrorinobject'notice'onfield'endTime':rejectedvalue[2024-05-31T07:32:24.000+00:00];codes[typeMismatch.notice.endTime,typeMismatch.endTime,typeMismatch.java.util.Date,......
  • WPF MVVM如何在ViewModel直接操作控件对象
    早些年在WPF中使用COM组件时,需要在ViewModel中操作COM组件中的控件对象,但是这个控件对象又不支持绑定,后面的解决办法是在窗口加载时,将控件对象以参数传递到Loaded事件的处理命令中,然后将这个对象记录下来,后面就可以直接操作这个控件了。今天同事在使用WebView2的时候,又遇到这个......
  • CSS3媒体查询与页面自适应示例
    CSS3媒体查询(MediaQueries)是CSS的一个强大功能,它允许你根据设备的特性(如视口宽度、分辨率等)来应用不同的样式。这在创建响应式网站(即能自动适应不同屏幕尺寸和设备的网站)时非常有用。以下是一个简单的CSS3媒体查询和页面自适应的示例:首先,我们假设有一个简单的HTML结构:<!DOCTY......
  • AI UI developer by ChatGPT plugin:Tailwind CSS Builder
    AI网页UI开发工程师在ChatGPT插件市场中搜索TailwindCSSBuilder,对话可以直接生成基于tailwindcss的HTML网页:生成的网页结果:生成的网页源代码:点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport&q......