使用UI Toolkit Debugger查看元素
1、打开面板
2、找到元素在UI Builder窗体,别忘了打开Preview再选择元素
3、可以选择不同类型的窗体
4、查看元素的样式需要注意的是下面的样式会覆盖上面的
5、调试
修改内置控件样式
1、找到PanelSettings>Theme Style Sheet的资源文件,然后新建uss样式文件
2、将uss文件拖拽到Style Sheets中,需要注意的是下面的样式会覆盖上面的样式
使用在UI Toolkit Debugger面板中查看元素
USS变量
:root{
--font-color-primary:#C2C262;
--font-color-second:rgb(255,0,0);
}
.unity-base-field>.unity-base-field__label{
color:var(--font-color-primary);
}
.unity-base-field:focus>.unity-base-field__label{
color:var(--font-color-second);
}
要两个-
开头
示例
1、修改所有文字focus状态下颜色
.unity-base-field>.unity-base-field__label{
color:rgb(0,0,0)
}
.unity-base-field:focus>.unity-base-field__label{
color:rgb(0,0,0)
}
2、修改Toggle样式
#unity-checkmark .unity-toggle__checkmark:checked {
background-image: url('project://database/Assets/UnityDefaultRuntimeTheme.tss?fileID=-1304905567622442630&guid=9d716a99319f7ee45ab37997fac08f69&type=3#arrow-down@2x');
}
.unity-toggle__checkmark
{
-unity-background-image-tint-color:rgb(255,255,255);
min-width:20px;
}
.unity-toggle>.unity-toggle__input:checked>.unity-toggle__checkmark{
background-color: rgb(64,158,255);
}
.unity-base-field:checked>.unity-base-field__label{
color:rgb(64,158,255);
}
3、修改DropDownItem样式
.unity-base-dropdown__item {
-unity-font-style: normal;
-unity-text-align: upper-left;
font-size: 30px;
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 0, 0);
-unity-text-outline-width: 0;
}
4、自定义一个Toggle
1、在Toggle里添加一个Label
2、Label添加.toggle-label-right
3、样式文章来源:https://www.toymoban.com/news/detail-500255.html
.unity-toggle > .unity-base-field__label {
display: none;
}
.unity-toggle > .unity-base-field__input {
justify-content: flex-start;
flex-direction: row;
flex-grow: 0;
display: flex;
visibility: visible;
overflow: visible;
flex-basis: auto;
}
#unity-checkmark {
width: auto;
height: auto;
justify-content: space-around;
align-self: auto;
}
.unity-toggle > .toggle-label-right {
height: auto;
flex-basis: auto;
flex-shrink: 0;
flex-grow: 1;
flex-direction: column;
flex-wrap: nowrap;
font-size: 10px;
-unity-text-align: upper-left;
white-space: normal;
text-overflow: clip;
color: rgb(0, 0, 0);
-unity-font-style: normal;
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
-unity-text-outline-width: 0;
}
.unity-toggle:checked>.toggle-label-right{
color:rgb(64,158,255);
}
.unity-toggle > .unity-toggle__input > .unity-toggle__checkmark {
transition-duration: 0.3s;
transition-timing-function: linear;
}
.unity-toggle > .unity-toggle__input:checked > .unity-toggle__checkmark {
transition-duration: 0.3s;
transition-timing-function: linear;
}
伪标签 pseudo
hover
active
inactive
selected
disabled
enabled
focus
checked
root文章来源地址https://www.toymoban.com/news/detail-500255.html
到了这里,关于unity uitoolkit学习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!