Version: 2021.3
Get started with UI Builder
Create and manage UI Documents (UXML)

Workflow overview

The general approach to UI creation in the UI Builder is the following iteration cycle:

  1. Open an existing or create a new UI Document (UXML).
  2. Drag elements or other UI Documents (UXML) (created using this same iteration cycle) from the Library into the Hierarchy to create you UI hierarchy.
  3. Select elements in the Hierarchy or Canvas to access their attributes and style properties in the Inspector.
  4. Set per-element attributes like Label Text or Button Tooltip via the Inspector’s Attributes section.
  5. Set per-element style properties, including layout and position properties, via the Inspector’s Inline Styles section.
  6. When more than one element starts to need the same style properties, add or create a StyleSheet to the UI Document (UXML) using the StyleSheets pane.
  7. With an element selected, extract its inline style properties to a StyleSheet via the Inspector’s StyleSheet > Style Class List section by giving it a new style class name and clicking Extract Inlined Styles to New Class.
  8. Create additional USS Selectors via the Add new selector… at the top of the StyleSheets pane that override a subset of style properties on a specific set of elements, like a .my-button:hover { color: blue; } selector that sets the color blue on any element that has the class .my-button and the mouse is on top of it.
  9. Test your UI by clicking the Preview button in the Viewport’s toolbar to disable Canvas authoring and allow the UI to become interactable (ie. test the :hover styles).
  10. Go back to step (2) and save the UI Document (UXML).
Get started with UI Builder
Create and manage UI Documents (UXML)
Copyright © 2020 Unity Technologies
优美缔软件(上海)有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。