This guide will cover the layouting mechanism. It is an important concept to master in order to easily create responsive, dynamic front ends for your apps.
At the center of layouting is the Group node. Group nodes are arranged in a hierarchy as can be seen in the node graph below. A Group controls the layout of its children and there are a number of properties that can be used to specify how the children of a Group node will be layouted.
?> Hover the nodes in the Noodl editor and they will highlight in the preview window. This is a great way to inspect a node that you are unfamiliar with.
Select one of the nodes to view it's properties. In the property panel you can find the Margin and padding controls.
Here you can specify the margin, i.e. the distance between this node and its siblings in the layout. You can specify the margins in all four directions. You can also specify the padding, which is the distance from the borders of the Group to it's children.
The best way to learn is to play around with the three nodes in this simple hierarchy.
By default the Group node will stack it's children vertically. You can change the layout direction by editing the Layout property. You can change the layout between:
- Vertical Children are stacked vertically.
- Horizontal Children are stacked horizontally.
- None Children are not stacked.
Check out the small node graph below. Copy these nodes and paste them into an empty component in your Noodl editor, and then change the Layout of the top level node to see how the direction of the child nodes change.
The dimensions section of the properties cover how the size of a Group is derived. The default is that both Width and Height is explicitly specified in either pixels (px), percentage of parent (%), or as a percentage of the viewport size (vw and vh).
A Group can also get its dimensions from the size of its children. You use the icons at the top to change between the four modes (from right):
- Explicit width and height Specify both width and height explicitly.
- Explicit width, Content height Specify the width explicitly but the height will be the total of the children heights and margins (depending on layout).
- Explicit height, Content width Specify the height explicitly but the width will be the total of the children widths and margins (depending on layout).
- Content width and height The size of this group will be the total width and height of the children based on the layout.
You can copy the nodes below to an empty component in your Noodl editor. The result is shown to the right. These nodes each use a different setting for the Dimensions icons.
The Alignment controls can be used to specify how a child Group (or other visual node) is aligned relative to its parent.
If the parent Group has its Layout property set to None you can use the alignment controls to pin the child visual node to a corner. You can then use the margins or padding to offset it from that corner.
If you have a Layout set for the parent node, such as Vertical (default) or Horizontal one of the alignments will not have any effect as that dimension is controlled by the layout. In the example below the two circles are kept in a vertical layout so the vertical alignment will not have any effect.
If the layouted child nodes extend beyond the border of the parent you have a couple of options to control the behaviour, wrapping or scrolling. This section will explain the wrapping options that are available.
Wrapping is controlled by the Multi Line Wrap option in the properties.
You can choose any of these options:
- Off The children will simply extend beyond the borders of the parent node (default).
- On The children will wrap onto a new line when they extend beyond the border of their parent.
- On Reverse The children will wrap but in the reverse direction.
If you don't want the children to wrap but instead want scrolling you need to enable it via the Enable Scroll property of the Group node.
