Skip to main content
Version: ver. 1.0.0

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:​

Global colors​

  • Here you can set up global color sets to create different themes.
  • Theme: Global colors theme selector.
  • For more information about Global colors, see the [Global colors](global colors.md) section.

Layout​

Layout can be used to control how elements are arranged in relation to each other.

Layout toggles between three modes:

  • Default mode: In this layout mode there is no correlation inbetween different widgets and assets, you can move your elements freely on the selected screen.

  • Horizontal mode: This layout mode arranges the elements in a horizontal manner.

  • Vertical mode: This layout mode arranges the elements in a vertical manner.loading-ag-30103

Align:  Alignment options for content positioning using a 9-point 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. (you can also set grid parameters trough the dropdown lists beside the grid)

    • 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

Cross place: Configures cross axis alignment settings, If two different sized element is in the layout, this will allign the smaller element in the desired position, this has three states:

  • Top: Smaler items aligns to top position.

  • Mid: Smaller items aligns to middle position.

  • Bottom: Smaller items aligns to bottom position.

Wrap: Toggle content wrapping.

Reverse:Reverse the direction of items

Gap: Sets the space between items,

  • Horizontal value

  • Vertical value

Transformation

  • 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 the management of 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 is the place to 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.

Scrolling​

The Scrolling section is dedicated to configure the scrolling attributes to different elements

  • Add scrolling button (+): Add scrolling attributes to enable different scrolling types.

For more detailed information about Flags, refer to the Scrolling 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.