Component:ScrollRect: Difference between revisions

From Resonite Wiki
Automated: update Fields, Categories
Added a video. No longer a stub. Heavily updated description. Added field descriptions. Added usage description.
Line 2: Line 2:
<translate>
<translate>
<!--T:1-->
<!--T:1-->
{{stub}}
{{Infobox Component
{{Infobox Component
|Image=ScrollRectComponent.png
|Image=ScrollRectComponent.png
Line 9: Line 8:


<!--T:2-->
<!--T:2-->
== Intoduction ==
The '''ScrollRect''' component is for making the contents of this [[Slot]] (such as child objects with [[Component:RectTransform|RectTransforms]]) scrollable.


'''ScrollRect''' is a component for making a child with a [[RectTransform (Component)|RectTransform]] scroll.
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.


ScrollRect will not do any clipping on its own. If it is a child of an object with a [[Mask (Component)|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-->
== Usage ==
{{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|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv3=true|
|ViewportOverride|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv3=true|Overrides the viewport of this scrollrect.
|__legacyContent|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv4=true|
|__legacyContent|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv4=true|Internal - Used for the content of the scrollrect.
}}
}}


<!--T:4-->
<!--T:4-->
== Behavior ==
== 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-->
Line 35: Line 38:
</translate>
</translate>
[[Category:Components{{#translation:}}|Scroll Rect]]
[[Category:Components{{#translation:}}|Scroll Rect]]
[[Category:ComponentStubs]]
[[Category:Components:UIX:Interaction{{#translation:}}|Scroll Rect]]
[[Category:Components:UIX:Interaction{{#translation:}}|Scroll Rect]]

Revision as of 04:04, 28 July 2024

Component image 
ScrollRect component as seen in the Scene Inspector


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.

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.
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.

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:

Related Components