UI Properties overview

General Components Properties

Tip

Blue and Orange field names: Blue field names indicate that the field and value are inherited from a parent class. Orange field names indicate that the value of the field has been changed.

Info

Under Info you can find which Show the UI is affiliated to, and its kind.
UI show can be:

1. Show UI - which means it is a show UI you created

   or

2. Template UI - which means Erizos Studio has created that template while importing the scene from the render engine.

Common

Under Common you can see the following:

1. The Type of component.
2. Its Name - this is the name used in the scripting part of the UI building.
3. Set its Visibility to the operator.
4. Set the Text of that component if any.
5. Disable the component without deleting it.

Tip

The Text field name in this image is orange, which means the default value has been changed.

Layout

Under Layout you can set the size and position of the component.
The UI Builder gives you full control over the look and position of the components, with Anchor adjusting and overflow control.

Typography

Under Typography you can control the Text portion of the component, using fonts, weight and size as you like.
You can adjust the text position for your needs, using the multiple aligns, colors and wrap options.

Tip

Many of the field names in this image are blue, which indicates that they are inherited.

Style

Under Style you can change the color of the component background.

Border

Under Border you can adjust the component border look and feel.
By using the radial selector you can choose which border will be affected, or all of them.

Style lets you change how the border is drawn (full line, dashed etc).
Width and color let you change the thickness of the line, and its color.
Radius lets you bevel round edges , either all uniformly, or each one individually.

Misc

Under Misc you can control the cursor style while hovering over the selected component and the Opacity of the selected component.
You can control the opacity of the entire UI by selecting the background and changing the opacity.

Box shadow

Under Box shadow you can add and stylize the shadow of the component.
You can choose Outer or Inner shadow and personalize its look - like angle, position and color.

Text shadow

Under Text shadow you can add and stylize the shadow of the text in the component, using the same tools as box shadow.

Custom CSS

In addition to the multiple built-in options to stylize your UI, you can also use pure CSS to add other effects and styling options to your UI.