Component:GridLayout: Difference between revisions

From Resonite Wiki
m ProbablePrime moved page GridLayout (Component) to Component:GridLayout: Creating component Namespace
Added a video.
 
(2 intermediate revisions by 2 users not shown)
Line 2: Line 2:
<translate>
<translate>
<!--T:1-->
<!--T:1-->
{{stub}}
{{Infobox Component
{{Infobox Component
|Image=GridLayoutComponent.png
|Image=GridLayoutComponent.png
Line 9: Line 8:


<!--T:2-->
<!--T:2-->
== Intoduction ==
The '''GridLayout''' component aligns the [[UIX]] elements from left to right, top to bottom. This component also comes with controllable parameters that a [[User|user]] can use to adjust the way the grid layout is represented on the [[Component:Canvas|Canvas]] or element [[Slot|slot]].


<!--T:3-->
<!--T:3-->
== Usage ==
{{Table ComponentFields
{{Table ComponentFields
|PaddingTop|Float|  
|PaddingTop|Float|Makes padding on the top of this grid, separating it from the top.
|PaddingRight|Float|  
|PaddingRight|Float|Makes padding on the right of this grid, separating it from the right.
|PaddingBottom|Float|  
|PaddingBottom|Float|Makes padding on the bottom of this grid, separating it from the bottom.
|PaddingLeft|Float|  
|PaddingLeft|Float|Makes padding on the left of this grid, separating it from the left.
|CellSize|Float2|  
|CellSize|Float2|The size of each content cell.
|Spacing|Float2|  
|Spacing|Float2|Makes padding between the content cells of this grid, separating it evenly.
|HorizontalAlign|LayoutHorizontalAlignment|  
|HorizontalAlign|LayoutHorizontalAlignment|how this grid should be aligned horizontally.
|VerticalAlign|LayoutVerticalAlignment|  
|VerticalAlign|LayoutVerticalAlignment|how this grid should be aligned vertically.
|ExpandWidthToFit|Bool|  
|ExpandWidthToFit|Bool|Extends this grid to fit the entire [[UIX]] element that it is on.
|PreserveAspectOnExpand|Bool|  
|PreserveAspectOnExpand|Bool|Preserves the aspect ratio when expanded to fit.
|AlignLastRowIndividually|Bool|  
|AlignLastRowIndividually|Bool|Alighns the last row for this grid seprately.
}}
}}


<!--T:4-->
<!--T:4-->
== Behavior ==
== Usage ==
This is used to make a nice grid layout of a user's content. The user has a lot of control when it comes to making this kind of layout, especially when it comes to the amount of content cells, expanding and scaling those cells, and alignments.


<!--T:5-->
<!--T:5-->
== Examples ==
== Examples ==
=== Videos ===
[[User:ProbablePrime|ProbablePrime]]'s tutorial video on the Grid Layout:
<youtube>1-FF9IolGZw</youtube>


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

Latest revision as of 23:42, 28 July 2024

Component image 
GridLayout component as seen in the Scene Inspector


The GridLayout component aligns the UIX elements from left to right, top to bottom. This component also comes with controllable parameters that a user can use to adjust the way the grid layout is represented on the Canvas or element slot.

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 Makes padding on the top of this grid, separating it from the top.
PaddingRight Float Makes padding on the right of this grid, separating it from the right.
PaddingBottom Float Makes padding on the bottom of this grid, separating it from the bottom.
PaddingLeft Float Makes padding on the left of this grid, separating it from the left.
CellSize Float2 The size of each content cell.
Spacing Float2 Makes padding between the content cells of this grid, separating it evenly.
HorizontalAlign LayoutHorizontalAlignment how this grid should be aligned horizontally.
VerticalAlign LayoutVerticalAlignment how this grid should be aligned vertically.
ExpandWidthToFit Bool Extends this grid to fit the entire UIX element that it is on.
PreserveAspectOnExpand Bool Preserves the aspect ratio when expanded to fit.
AlignLastRowIndividually Bool Alighns the last row for this grid seprately.

Usage

This is used to make a nice grid layout of a user's content. The user has a lot of control when it comes to making this kind of layout, especially when it comes to the amount of content cells, expanding and scaling those cells, and alignments.

Examples

Videos

ProbablePrime's tutorial video on the Grid Layout:

Related Components