Styling

ELEMENTS allows you to style your UI using Unit'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, call ClassName repeatedly...

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.

return new Label("My Label").BindClassName("fancy-label", ViewModel.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 value in your view model.

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