imported>Chemicalcrux Creating the page (with a bot!) |
Added a video. |
||
(3 intermediate revisions by 3 users not shown) | |||
Line 2: | Line 2: | ||
<translate> | <translate> | ||
<!--T:1--> | <!--T:1--> | ||
{{Infobox Component | {{Infobox Component | ||
|Image=GridLayoutComponent.png | |Image=GridLayoutComponent.png | ||
Line 9: | Line 8: | ||
<!--T:2--> | <!--T:2--> | ||
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--> | ||
{{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--> | ||
== | == 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:}}| | [[Category:Components{{#translation:}}|Grid Layout]] | ||
[[Category:Components:UIX:Layout{{#translation:}}|Grid Layout]] | |||
[[Category:Components:UIX:Layout{{#translation:}}| |
Latest revision as of 23:42, 28 July 2024
Component image
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.
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: