Skip to main content

Inspector

The Inspector panel provides detailed controls for the currently selected element. This panel allows you to view and modify properties of screens, containers, widgets, and other UI elements. Besides, there may be special settings that vary by widget type. For more information about specific widget settings, see the Widget types section.

Main sections:​

Element identification​

  • Element Type Header: Shows the type of the selected element
  • Name: Allows viewing and editing the name of the selected element

thermostat

⚠️CAUTION Special characters, symbols, punctuation marks, and other non-alphanumeric characters are not permitted in the Name field. Only alphanumeric and space characters are allowed.

Transformation controls​

When an element is selected:

  • X: Sets the horizontal position of the element relative to its parent
  • Y: Sets the vertical position of the element relative to its parent
  • Unit Selector: Dropdown to switch between different measurement units:
    • PX - Pixels (relative to Position Grid)
    • % - Percentage (relative to Position Grid)
  • Position Grid: A visual guide on the right showing positioning options. Clicking on different points of this grid aligns the element relative to its parent:
    • Top-left: Aligns the element to the top-left
    • Top-mid: Centers the element horizontally while aligning it to the top
    • Top-right: Aligns the element to the top-right
    • Mid-left: Centers the element vertically while aligning it to the left
    • Center: Centers the element both horizontally and vertically
    • Mid-right: Centers the element vertically while aligning it to the right
    • Bottom-left: Aligns the element to the bottom-left
    • Bottom-mid: Centers the element horizontally while aligning it to the bottom
    • Bottom-right: Aligns the element to the bottom-right

thermostat

Size controls​

  • Width: Sets the width of the element in pixels (PX), percentage (%), or content-based sizing
  • Height: Sets the height of the element in pixels (PX), percentage (%), or content-based sizing
  • Unit Selector: Dropdown to switch between different measurement units:
    • PX - Pixels (absolute size)
    • % - Percentage (relative to parent)
    • content - Content-based sizing

thermostat

States​

The States section allows managing different visual states of the element. This section shows:

  • Default State: The standard appearance of the element
  • Add State Button (+): Adds additional states to the element

For more detailed information about States, refer to the States section.

Flags​

The Flags section allows setting special behaviors and attributes for elements. This section includes:

  • Add Flags Button (+): Adds flags to control element behavior

For more detailed information about Flags, refer to the Flags section.

Styles​

The Styles section allows you to customize the visual appearance of UI elements. This section enables:

  • Style modification: Apply and customize styles for different element states
  • Global styles: Create or choose from saved styles in your project
  • Add style button (+): Adds new style properties to the selected element

For more detailed information about Styles and their application across different states, refer to the Styles section.