使用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狀態(tài)下顏色

.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、樣式

.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文章來源地址http://www.zghlxwxcb.cn/news/detail-500255.html

到了這里，關于unity uitoolkit學習的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！