Component:HorizontalLayout: Difference between revisions

From Resonite Wiki
imported>Xekri
No edit summary
 
Added a video.
 
(3 intermediate revisions by 3 users not shown)
Line 2: Line 2:
<translate>
<translate>
<!--T:1-->
<!--T:1-->
{{stub}}
{{Infobox Component
{{Infobox Component
|Image=HorizontalLayoutComponent.png
|Image=HorizontalLayoutComponent.png
Line 11: Line 10:
== Introduction ==
== Introduction ==


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:
<youtube>1-FF9IolGZw</youtube>


<!--T:6-->
<!--T:6-->
== Related Components ==
== Related Components ==
</translate>
</translate>
[[Category:Components{{#translation:}}|HorizontalLayout (Component){{#translation:}}]]
[[Category:Components{{#translation:}}|Horizontal Layout]]
[[Category:ComponentStubs]]
[[Category:Components:UIX:Layout{{#translation:}}|Horizontal Layout]]
[[Category:Components:UIX:Layout{{#translation:}}|HorizontalLayout (Component){{#translation:}}]]

Latest revision as of 23:42, 28 July 2024

Component image 
HorizontalLayout component as seen in the Scene Inspector


Introduction

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.
Fields
Name Type Description
persistent Bool Determines whether or not this item will be saved to the server.
UpdateOrder Int Controls the order in which this component is updated.
Enabled Bool Controls whether or not this component is enabled.
PaddingTop Float The padding to add, in pixels, at the top of the entire layout.
PaddingRight Float The padding to add, in pixels, at the right of the entire layout.
PaddingBottom Float The padding to add, in pixels, at the bottom of the entire layout.
PaddingLeft Float The padding to add, in pixels, at the left of the entire layout.
Spacing Float The padding to add, in pixels, between each object.
HorizontalAlign LayoutHorizontalAlignment The horizontal alignment to use for the child objects in the layout.
VerticalAlign LayoutVerticalAlignment The vertical alignment to use for the child objects in the layout.
ForceExpandWidth Bool Whether to force the children to expand to fill the available horizontal space.
ForceExpandHeight Bool 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:

  1. 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.
  2. 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.
  3. If the HorizontalLayout is at its minimum width or smaller, all the child layout elements will also have their minimum width.
  4. The closer the HorizontalLayout is to its preferred width, the closer each child layout element will also get to their preferred width.
  5. 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:

Related Components