Steps
Add an UI Document via the Hierarchy tab
Add a Template on to UI Document
Add a UI Toolkit Element via the Hierarchy tab
Link UI Document to the UI Toolkit Component (if it has not been automatically assigned)
Enter the selector wanted in the selector field
Add a Style Sheet via the Custom Styles section of the UI Toolkit Component
Result
Before | After |
---|
| |
using SoyWar.UIToolkit;
using SoyWar.UIToolkit.Elements;
using UnityEngine;
using UnityEngine.UIElements;
public class MyComponent : MonoBehaviour
{
[SerializeField] private UIDocument _document;
[SerializeField] private VisualElementComponent _visualElementComponent;
[SerializeField] private StyleSheet _styleSheet;
public void Start()
{
// Create a Selector via the Selector Builder
Selector selector = Selector.Builder(className: "element").Build();
// Or via the Selector Parser
Selector selector = Selector.Parse(".element");
// Link the UIDocument to the component
_visualElementComponent.Document = _document;
// Link the created selector to the component
_visualElementComponent.Selector = selector;
// Use the function AddCustomStyles() to add a style sheet
_visualElementComponent.AddCustomStyles(_styleSheet);
}
}