m ProbablePrime moved page ScrollRect (Component) to Component:ScrollRect: Creating component Namespace |
Automated: update Replace |
||
(3 intermediate revisions by 3 users not shown) | |||
Line 2: | Line 2: | ||
<translate> | <translate> | ||
<!--T:1--> | <!--T:1--> | ||
{{Infobox Component | {{Infobox Component | ||
|Image=ScrollRectComponent.png | |Image=ScrollRectComponent.png | ||
Line 9: | Line 8: | ||
<!--T:2--> | <!--T:2--> | ||
The '''ScrollRect''' component is for making the contents of this [[Slot]] (such as child objects with [[Component:RectTransform|RectTransforms]]) scrollable. | |||
The scrollRect will not do any clipping on its own. If it is a child of an object with a [[Component:Mask|Mask]] component, it effectively becomes a window into the scrolled content. | |||
It is recommended to use a [[Component:ContentSizeFitter|ContentSizeFitter]] component and setting the <code>VerticalFit</code> to <code>Minimum</code> when combined with a scrollrect to help fit it within a [[Component:RectTransform|RectTransform]]. | |||
<!--T:3--> | <!--T:3--> | ||
{{Table ComponentFields | {{Table ComponentFields | ||
|NormalizedPosition|Float2|The scroll position between (0,0) and (1,1) with (0,0) being the lower left corner. | |NormalizedPosition|Float2|The scroll position between (0,0) and (1,1) with (0,0) being the lower left corner. | ||
|HorizontalAlign|LayoutHorizontalAlignment| | |HorizontalAlign|LayoutHorizontalAlignment|Aligns the scrollrect's contents horizontal. | ||
|VerticalAlign|LayoutVerticalAlignment| | |VerticalAlign|LayoutVerticalAlignment|Aligns the scrollrect's contents vertically. | ||
|ViewportOverride|RectTransform| | |ViewportOverride|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv3=true|Overrides the viewport of this scrollrect. | ||
|__legacyContent|RectTransform| | |__legacyContent|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv4=true|Internal - Used for the content of the scrollrect. | ||
}} | |||
== Sync Delegates == | |||
{{Table ComponentTriggers | |||
|MoveToTop()|[[Type:Action|Action]]| | |||
|MoveToBottom()|[[Type:Action|Action]]| | |||
|MoveToLeft()|[[Type:Action|Action]]| | |||
|MoveToRight()|[[Type:Action|Action]]| | |||
}} | }} | ||
<!--T:4--> | <!--T:4--> | ||
== | == Usage == | ||
This is useful when you have a lot of text or other [[UIX]] elements that you want to be scrollable, much like how a webpage has a lot of content that can't fit in just one screen. | |||
<!--T:5--> | <!--T:5--> | ||
== Examples == | == Examples == | ||
=== Videos === | |||
[[User:ProbablePrime|ProbablePrime]]'s tutorial video on the scrollrect component: | |||
<youtube>cTcOdVw1cEQ</youtube> | |||
<!--T:6--> | <!--T:6--> | ||
== Related Components == | == Related Components == | ||
</translate> | </translate> | ||
[[Category:Components{{#translation:}}| | [[Category:Components{{#translation:}}|Scroll Rect]] | ||
[[Category:ComponentStubs]] | [[Category:ComponentStubs]] | ||
[[Category:Components:UIX:Interaction{{#translation:}}| | [[Category:Components:UIX:Interaction{{#translation:}}|Scroll Rect]] |
Latest revision as of 21:06, 6 November 2024
Component image
The ScrollRect component is for making the contents of this Slot (such as child objects with RectTransforms) scrollable.
The scrollRect will not do any clipping on its own. If it is a child of an object with a Mask component, it effectively becomes a window into the scrolled content.
It is recommended to use a ContentSizeFitter component and setting the VerticalFit
to Minimum
when combined with a scrollrect to help fit it within a RectTransform.
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. |
NormalizedPosition
|
Float2 | The scroll position between (0,0) and (1,1) with (0,0) being the lower left corner. |
HorizontalAlign
|
LayoutHorizontalAlignment | Aligns the scrollrect's contents horizontal. |
VerticalAlign
|
LayoutVerticalAlignment | Aligns the scrollrect's contents vertically. |
ViewportOverride
|
RectTransform | Overrides the viewport of this scrollrect. |
__legacyContent
|
RectTransform | Internal - Used for the content of the scrollrect. |
Sync Delegates
Name | Arguments | Description |
---|---|---|
MoveToTop()
|
Action | |
MoveToBottom()
|
Action | |
MoveToLeft()
|
Action | |
MoveToRight()
|
Action |
Usage
This is useful when you have a lot of text or other UIX elements that you want to be scrollable, much like how a webpage has a lot of content that can't fit in just one screen.
Examples
Videos
ProbablePrime's tutorial video on the scrollrect component: