Horizontal layout

Live demo

Renders content horizontally with consistent spacing between all nodes.

Node name : horizontal-layout

Note

You should always use vertical-layout or horizontal-layout to align elements.
In some very rare cases, you may use self alignment directives.

Attributes

Attribute	Type	Required	Default value	Description
space	string (none, small, medium, large , extralarge)	false	small	Space between nodes.
align	string (left, center, right, stretch, space-between)	false	left	Horizontal alignment.
vertical-align	string (top, center, bottom, stretch)	false	stretch	Vertical alignment.
wrap	bool	false	true	Value indicating whether the content is wrapped.

Note

By default, a horizontal-layout will take all the available width.

Examples

List of field

<horizontal-layout>
    <form-field property-name="Name" />
    <form-field property-name="Email" />
</horizontal-layout>

Horizontal alignment

<horizontal-layout align="left" >
  <text>My</text>
  <text>content</text>
</horizontal-layout>

<horizontal-layout align="center" >
  <text>My</text>
  <text>content</text>
</horizontal-layout>

<horizontal-layout align="right" >
  <text>My</text>
  <text>content</text>
</horizontal-layout>

Vertical alignment

By default, <horizontal-layout> only takes the minimum height required by its content. Therefore, to be able to vertically align its content, <horizontal-layout> must be taller than its content.
Here we use layout:height="fill" to make it take all the available height in the screen.

<horizontal-layout vertical-align="top" layout:height="fill">
  <text>My</text>
  <text>content</text>
</horizontal-layout>

<horizontal-layout vertical-align="center" layout:height="fill">
  <text>My</text>
  <text>content</text>
</horizontal-layout>

<horizontal-layout vertical-align="bottom" layout:height="fill">
  <text>My</text>
  <text>content</text>
</horizontal-layout>

Vertical and horizontal alignment

<horizontal-layout align="center" vertical-align="center" layout:height="fill">
  <text>My</text>
  <text>content</text>
</horizontal-layout>