UI Toolkit ComponentUI Toolkit Component
UI Toolkit ComponentUI Toolkit Component
  • Docs
  • API
  • Changelog
  • Unity Asset Store
  • Bug report
  • Getting Started
  • Essentials
    • How To Import a Demo
    • How To Add a Style Sheet
    • How To Add an Event
    • List of Pseudo Classes
    • List of Events
  • Advanced
    • How To Get a VisualElement
    • How To Find a VisualElement
    • How To Check a VisualElement
    • How To Create a custom Pseudo Class
    • How To Create a custom UI Toolkit Component
    • How To Add a custom UI Toolkit GameObject
Generated by DocFX
(with DiscordFX + SingulinkFX)

Search Results for

    How To Add a Style Sheet

    • Interface
    • Code

    Steps

    1. Add an UI Document via the Hierarchy tab

      UI Document added from Hierarchy tab

    2. Add a Template on to UI Document

      Template added to UI Document

    3. Add a UI Toolkit Element via the Hierarchy tab

      UI Toolkit Element added from Hierarchy tab

    4. Link UI Document to the UI Toolkit Component (if it has not been automatically assigned)

      UI Document linked to the UI Toolkit Component

    5. Enter the selector wanted in the selector field

      Text selector filled

    6. Add a Style Sheet via the Custom Styles section of the UI Toolkit Component

      Style sheet added to the UI Toolkit Component

    Result

    BeforeAfter
    Result before the implementationResult after the implementation
    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);
        }
    }