Styling

ELEMENTS allows you to style your UI using Unity's USS. If you're familiar with CSS from web development, you'll be right at home.

Loading stylesheets

To load a stylesheet, you can call the StyleSheet method on any element. This will apply the stylesheet to that element and its descendants.

return new VerticalGroup(
  child,
  child
).StyleSheet("Path/To/Stylesheet/Resource");

You can pass a resource string to load the stylesheet via its path. This will search all Resources folders in your Assets folder for the path specified. For example, if your stylesheet is located at Assets/Resources/Styles/MyStyles.uss you would load these with .StyleSheet("Styles/MyStyles"). Note the .uss extension is omitted.

You can also pass an instance of StyleSheet directly to this method if you have it available.

Classes

You can assign a class to any element using the ClassName method...

new Label("My Label").ClassName("fancy-label");

And then style it in a stylesheet...

.label {
  color: pink;
}

To add multiple classes, pass a space-separated string...

new Label("My Label").ClassName("fancy-label another-class");

You can also chain multiple ClassName calls if you prefer...

new Label("My Label")
  .ClassName("fancy-label")
  .ClassName("another-class");

Conditional classes

If you want to conditionally apply a class, you can pass a second boolean parameter to the ClassName method...

var isFancy = false;

return new Label("My Label").ClassName("fancy-label", isFancy)

This is more useful with the BindClassName method which takes an Observable<bool> and automatically updates the class name when the observable value changes.

var IsFancy = new ReactiveProperty<bool>(false);

return new Label("My Label").BindClassName("fancy-label", IsFancy);

Names

You can also assign a name to an element using the Name method. Names are unique to the element and can be thought of like IDs in USS.

return new Label("My Label").Name("my-label");

my-label {
  color: blue;
}

Name is also a bindable property, so you can bind it to a reactive value.

var LabelName = new ReactiveProperty<string>("my-label");

return new Label("My Label").BindName(LabelName);

Utility classes

ELEMENTS ships with a small set of built-in utility classes (gap utilities). For a full Tailwind-style utility class system, we recommend pairing ELEMENTS with ZoboUI. See the Utility Classes page for setup instructions and usage examples.