Skip to main content
Version: ver. 1.3.0

Flags

Flags define special behaviors and characteristics for UI elements. They allow users to enable or disable specific functionality for screens, containers, and widgets without writing code.

Accessing flags​

The Flags section is located in the Inspector panel below the States section. Each element can have multiple flags applied simultaneously.

Adding flags​

To add flags to an element:

  1. Select the element in the canvas
  2. In the Inspector panel, locate the Flags section
  3. Click the "+" button to the right of the Flags header
  4. A list titled "Add flags" will appear
  5. Use the search bar at the top to filter available flags if needed
  6. Click on one or more flags to select them (selected flags will appear with a green icon and green background)
  7. Once the desired flags are selected, close the dialog by clicking the X in the top-right corner or clicking outside the list
  8. The selected flags will be added to the element in the Flags section

Toggling flags​

Once flags are added to an element, they appear in the Flags section with On/Off toggle buttons:

  • Click "On" to enable the flag
  • Click "Off" to disable the flag
thermostat

Available flags​

Element behavior flags​

  • Hidden: Makes the element invisible in the UI

  • Clickable: Allows the element to receive click/tap events

  • Checkable: Allows the element to be toggled on and off (for checkboxes, toggles, etc.)

  • Adv hittest: Enables advanced hit testing for complex shapes

  • Ignore layout: Excludes the element from automatic layout calculations

  • Flex in new track: Creates a new flex layout track for the element

Removing flags​

To remove a flag from an element:

  1. Click the "+" button to open the "Add flags" list
  2. Find the flag that needs to be removed (flags that are already added will have a green background and icon)
  3. Click on the flag needs to be removed (this will deselect it)
  4. Close the dialog by clicking the X in the top-right corner or clicking outside the list
  5. The deselected flag will be removed from the Flags section in the Inspector
  • For more information on how flags affect element styling, see the Styles section
  • To learn how flags interact with states, refer to the States section
  • For details on how flags impact events, see the Events section