Component:GridLayout: Difference between revisions

From Resonite Wiki
Added a description. Added field descriptions. Added usage description.
Added a video.
 
Line 31: Line 31:
<!--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-->

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