The '''HorizontalLayout''' component is used to layout child objects in a row.
The '''HorizontalLayout''' component is used to layout child [[UIX]] element [[Slot|slots]] in a row, left to right.
The order of the objects depends on each child's OrderOffset property. Normally these are 0, but if you change it, the children will be ordered by increasing OrderOffset, with children of equal OrderOffset being ordered by some effectively random process.
The order of the objects depends on each child's OrderOffset property. Normally these are <code>0</code>, but if you change it, the children will be ordered by increasing OrderOffset, with children of equal OrderOffset being ordered by the time they were added to that parent slot.
{{Note|If you want to layout the [[UIX]] elements vertically, use the [[Component:VerticalLayout|VerticalLayout]] component instead.|suggestion}}
<!--T:3-->
<!--T:3-->
== Usage ==
{{Table ComponentFields
{{Table ComponentFields
|PaddingTop|Float|The padding to add, in pixels, at the top of the entire layout.
|PaddingTop|Float|The padding to add, in pixels, at the top of the entire layout.
Line 30:
Line 30:
<!--T:4-->
<!--T:4-->
== Behavior ==
== Usage ==
The HorizontalLayout component places its child layout elements next to each other, side by side. Their widths are determined by their respective minimum, preferred, and flexible widths according to the following model:
The HorizontalLayout component places its child layout elements next to each other, side by side. Their widths are determined by their respective minimum, preferred, and flexible widths according to the following model:
Line 44:
Line 44:
<!--T:5-->
<!--T:5-->
== Examples ==
== Examples ==
=== Videos ===
[[User:ProbablePrime|ProbablePrime]]'s tutorial video on the Horizontal Layout:
The HorizontalLayout component is used to layout child UIX element slots in a row, left to right.
The order of the objects depends on each child's OrderOffset property. Normally these are 0, but if you change it, the children will be ordered by increasing OrderOffset, with children of equal OrderOffset being ordered by the time they were added to that parent slot.
If you want to layout the UIX elements vertically, use the VerticalLayout component instead.
Whether to force the children to expand to fill the available vertical space.
Usage
The HorizontalLayout component places its child layout elements next to each other, side by side. Their widths are determined by their respective minimum, preferred, and flexible widths according to the following model:
The minimum widths of all the child layout elements are added together and the spacing between them is added as well. The result is the minimum width of the HorizontalLayout.
The preferred widths of all the child layout elements are added together and the spacing between them is added as well. The result is the preferred width of the HorizontalLayout.
If the HorizontalLayout is at its minimum width or smaller, all the child layout elements will also have their minimum width.
The closer the HorizontalLayout is to its preferred width, the closer each child layout element will also get to their preferred width.
If the HorizontalLayout is wider than its preferred width, it will distribute the extra available space proportionally to the child layout elements according to their respective flexible widths.
For minimum, preferred, and flexible heights of child slots, use LayoutElement.
Examples
Videos
ProbablePrime's tutorial video on the Horizontal Layout:
