c#
public class CustomElement : VisualElement
{
public CustomElement (){
var tog = this.Q<Toggle>();
var ve = new VisualElement();
ve.AddToClassList("titleBar");
var root = tog;
root.Add(ve);
var butt = new Button();
butt.AddToClassList("options");
ve.Add(butt);
ve.BringToFront();
TextArea = this.Q(name: "TextArea");
TextField = TextArea.Q<TextField>(name: "Text");
TextField.RegisterCallback<ChangeEvent<string>>(TextChanged);
EnableChangedIndicator(TextArea, false);
}
void EnableChangedIndicator(VisualElement visualElement, bool enable)
{
visualElement.EnableInClassList("content-changed", enable);
}
private void TextChanged(ChangeEvent<string> evt)
{
EnableChangedIndicator(TextArea, true);
}
}
uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:engine="UnityEngine.UIElements"
xmlns:editor="UnityEditor.UIElements"
xsi:noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd"
xsi:schemaLocation="
UnityEngine.UIElements ../../../UIElementsSchema/UnityEngine.UIElements.xsd
UnityEditor.UIElements ../../../UIElementsSchema/UnityEditor.UIElements.xsd
UnityEditor.PackageManager.UI ../../../UIElementsSchema/UnityEditor.PackageManager.UI.xsd
"
>
<engine:Foldout name="Title">
<engine:VisualElement name ="TextElement">
<engine:VisualElement class ="content-changed" name="TextArea">
<engine:Label text="Text"/>
<engine:TextField multiline="true" class ="TextArea" name="Text"/>
</engine:VisualElement>
</engine:VisualElement>
</engine:Foldout>
</engine:UXML>
uss:
.unity-foldout
{
padding-left:0px;
padding-right:0px;
border-width: 1px 0px 1px 0px;
border-color: rgb(127,127,127);
}
.unity-foldout__toggle:hover
{
}
.unity-foldout__toggle
{
padding-left:10px;
padding-bottom:3px;
border-left-width:2px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.unity-foldout__toggle:focus>.unity-toggle__input>Label
{
color:rgb(0,60,136);
-unity-font-style: bold;
}
.unity-foldout__toggle>.unity-toggle__input>Label
{
-unity-font-style: bold;
}
.unity-foldout__toggle>.unity-toggle__input>#unity-checkmark
{
background-image: resource("IN foldout.png");
-unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle>.unity-toggle__input:checked>#unity-checkmark
{
background-image: resource("IN foldout on.png");
-unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:focus>.unity-toggle__input>#unity-checkmark
{
background-image: resource("IN foldout.png");
-unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:focus>.unity-toggle__input:checked>#unity-checkmark
{
background-image: resource("IN foldout on.png");
-unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:active>.unity-toggle__input>#unity-checkmark
{
background-image: resource("IN foldout act.png");
-unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:active>.unity-toggle__input:checked>#unity-checkmark
{
background-image: resource("IN foldout act on.png");
-unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__content
{
-unity-font-style: normal;
background-color: rgb(194,194,194);
margin-left: 0px;
padding-right:7px;
}
#TextArea
{
padding-left: 22px;
border-width: 0px 0px 0px 2px;
}
.options
{
background-image: resource("pane options.png");
border-width: 0px 0px 0px 0px;
background-color: rgba(0,0,0,0);
-unity-background-image-tint-color: rgba(0,0,0,127);
width:16px;
height:16px;
border-radius: 0px 0px 0px 0px;
}
.options:hover
{
background-color:rgb(239,239,239);
}
.titleBar:hover
{
background-color:rgb(214,214,214)
}
#unity-checkmark
{
align-self:center;
}
.content-changed
{
border-color:rgb(53,166,228);
-unity-font-style: Bold;
}