Skip to main content

Flags

Flags define special behaviors and characteristics for UI elements. They allow you 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 you've selected the desired flags, 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​

thermostat

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.)

Scrolling flags​

  • Scrollable: Makes the element capable of scrolling content
  • Scroll elastic: Enables an elastic bounce effect when scrolling past the content boundaries
  • Scroll momentum: Maintains scrolling motion after the user stops dragging
  • Scroll one: Restricts scrolling to one item at a time
  • Scroll chain horizontal: Links horizontal scrolling between elements
  • Scroll chain vertical: Links vertical scrolling between elements
  • Scroll with arrow: Enables scrolling using arrow buttons/keys

Special behavior flags​

  • Press lock: Maintains the pressed state until clicked again
  • Adv hittest: Enables advanced hit testing for complex shapes
  • Ignore layout: Excludes the element from automatic layout calculations
  • Send draw task events: Sends events during the drawing process
  • Overflow visible: Makes content visible even when it extends beyond the element's boundaries
  • 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 you want to remove (flags that are already added will have a green background and icon)
  3. Click on the flag you want to remove (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