Advanced Layout Design

MiRA has an advanced layout design mode that enhances the customization options for your layouts. This mode provides additional features and controls to fine-tune your layouts, making them more versatile and tailored to your needs.

Activating Advanced Mode

To activate the advanced layout design mode, first reach the UI menu and activate the option labeled “Enable advanced editor”.

Then, a new button appear in the workspace, named “Advanced”, which allows to toggle between the classic and the advanced editor.

Features of Advanced Mode

Alignment

In advanced mode, you have more options for automatically aligning controls. The five buttons with arrows correspond to “All”, “All Left”, “All Right”, “All Top”, and “All Bottom”.

Alignments

Alignments

Stack

Controls can now be stacked vertically, horizontally, or both (horizontally first).

Stacks

Stacks

Metrics Options

Each metric can now be set in “Pixel” (fixed size), unlike the classic mode which only allows “Linear” metrics (relative to the container). Additional options include:

  • Height/Width Factor: A linear factor of the other coordinate (e.g., “Height factor” can be applied to horizontal values and vice versa).
  • Min/Max Factor: Applies a linear factor from the minimum or maximum value of the height and width of the scope.

Metrics Options

Metrics Options

Min Size

Set the minimum size of the control to ensure proper display, especially when the scope size is relative to the window.

Margin

Add space around the selected scope by setting a margin.

Bound Trim

Unlike margin, bound trim values do not depend on alignment and surrounding controls.

Padding

Increase the size of the selected scope while keeping the content the same.