Positioning and Resizing
In the process of designing UI, positioning and resizing elements are essential aspects. This document provides a concise overview of the tools and controls within Theta for positioning elements, resizing, alignment, margin adjustment, and managing constraints.
Drag and Drop Positioning
Elements may be repositioned within the device frame using a simple drag-and-drop mechanism.
Positioning via keyboard arrows
On Theta it is also possible to place elements through the arrows on the keyboard. By clicking any arrow, the node that has the focus will move 1 pixel in the direction of the arrow. If you also press SHIFT while doing so, the node will move 10 pixels at a time.
← → ↑ ↓= 1 pxSHIFT+← → ↑ ↓= 10 px
Resize Handles
Resize handles, found on the sides and corners of each element, provide the functionality for adjusting element size.
Alignment Controls
The first row of the right-side control panel includes alignment controls. These controls enable swift alignment of selected elements to the top, bottom, left, right, or center of their container, horizontally and vertically.
Margin Controls
The second row of controls is dedicated to margin settings. This allows for manual adjustment of the margins for the top, bottom, left, and right sides of the element.
Width and Height Controls
Precise adjustment of element dimensions is facilitated through width and height controls.
Constraints Controls
Constraints, crucial for crafting responsive layouts, are managed through the third row of controls on the right-side panel. These settings dictate the element's behavior during screen resizing.
Further detailed guidance on using constraints is available on a dedicated page on this topic.