Skip to content

1. Overview

Joni Savolainen edited this page Jul 9, 2022 · 13 revisions

About

The goal of UIComponents is to ease the creation of reusable components when working with Unity's new UIToolkit system. It offers ways to load UXML and USS files automatically, and decouple your UI code from other systems via dependency injection.

See an example of simple usage below.

Simple usage

using UIComponents;

[Layout("MyComponent/MyComponent")]
[Stylesheet("MyComponent/MyComponent.style")]
[Stylesheet("Common")]
[Dependency(typeof(ICounterService), provide: typeof(CounterService))]
class MyComponent : UIComponent
{
    // The layout and stylesheets are loaded in the inherited
    // constructor. They are retrieved from Resources by default,
    // hence the lack of file extensions.
    
    // Queries are made in the inherited constructor.
    [Query("hello-world-label")]
    private readonly Label _countLabel;
    
    private readonly ICounterService _counterService;
    
    public MyComponent()
    {
        // Will yield a CounterService.
        _counterService = Provide<ICounterService>();
        
        _countLabel.text = _counterService.Count.ToString();
    }
}
var container = new VisualElement();
container.Add(new MyComponent());

UIComponents are just VisualElements with some additional code in their constructor for loading assets automatically.

Installation

With OpenUPM (recommended)

openupm add io.savolainen.uicomponents

Alternatively, merge this snippet to your Packages/manifest.json file:

{
    "scopedRegistries": [
        {
            "name": "package.openupm.com",
            "url": "https://package.openupm.com",
            "scopes": [
                "io.savolainen.uicomponents"
            ]
        }
    ],
    "dependencies": {
        "io.savolainen.uicomponents": "x.y.z"
    }
}

Where x.y.z is the current version

With Git

Add this under dependencies in your Packages/manifest.json file:

"io.savolainen.uicomponents": "https://github.com/jonisavo/uicomponents.git#upm/vx.y.z"

Where x.y.z is the current version.

To update, change upm/vx.y.z to point to the latest version.

Clone this wiki locally