Roblox UtilitiesDevlHub Roblox Documentation

Class

UIPageLayout

Memory category
Instances

Positions sibling UI elements as full-size pages in a single row or column that users can scroll or animate through one page at a time.

Creates a paged viewing window, like the home screen of a mobile device. You can use a UIPageLayout by parenting it to a GuiObject. The UIPageLayout will then apply itself to all of its GuiObject siblings.

Properties 10#

AnimatedbooleanWhether or not to animate transitions between pages.ReadSafe
CircularbooleanWhether or not the page layout wraps around at the ends.ReadSafe
CurrentPageGuiObjectThe page that is either currently being displayed or is the target of the current animation.ReadSafeReadOnlyNotReplicated
EasingDirectionEasingDirectionThe easing direction to use when performing an animation.ReadSafe
EasingStyleEasingStyleThe easing style to use when performing an animation.ReadSafe
GamepadInputEnabledbooleanControls the overrides of NextSelection{Up, Down, Left, Right}. Defaults to true.ReadSafe
PaddingUDimDetermines the amount that pages are separated from each other by.ReadSafe
ScrollWheelInputEnabledbooleanControls the use of scroll wheel, in case that it is intended for something else. Defaults to true.ReadSafe
TouchInputEnabledbooleanControls touch scrolling, in case this is a non-interactive layout. Defaults to true.ReadSafe
TweenTimefloatThe length of the animation.ReadSafe

Animated: boolean#

ReadSafe

When set to true, page transitions use the configured UIPageLayout.EasingStyle, UIPageLayout.EasingDirection, and UIPageLayout.TweenTime to animate the movement between pages. When set to false, page transitions are instantaneous. Defaults to true.

Circular: boolean#

ReadSafe

When set to true, navigating past the last page wraps around to the first page, and navigating before the first page wraps to the last. Animated transitions take the shortest rotational path around the wrap boundary. When set to false, navigation stops at the first and last pages. Defaults to false.

CurrentPage: GuiObject#

ReadOnlyNotReplicatedReadSafe

A read-only reference to the GuiObject sibling that is currently displayed or is the target of an in-progress animation. The layout updates this property when pages change via UIPageLayout:Next(), UIPageLayout:Previous(), UIPageLayout:JumpTo(), UIPageLayout:JumpToIndex(), or through user input (touch swipe, scroll wheel, or gamepad). If no page has been explicitly navigated to, it defaults to the first visible GuiObject sibling in layout order.

EasingDirection: EasingDirection#

ReadSafe

Determines the direction component of the easing function applied during animated page transitions. Combined with UIPageLayout.EasingStyle to form the full tween curve. Only takes effect when UIPageLayout.Animated is true. Defaults to EasingDirection.Out.

EasingStyle: EasingStyle#

ReadSafe

Determines the easing curve applied during animated page transitions. Combined with UIPageLayout.EasingDirection to form the full tween curve. Only takes effect when UIPageLayout.Animated is true. Defaults to EasingStyle.Back.

GamepadInputEnabled: boolean#

ReadSafe

When set to true, the layout overrides sibling GuiObject.NextSelectionLeft and GuiObject.NextSelectionRight (for horizontal fill direction) or GuiObject.NextSelectionUp and GuiObject.NextSelectionDown (for vertical fill direction) so that gamepad directional navigation moves between pages. Additionally, the L1 and R1 bumper buttons advance to the previous and next page respectively. When false, gamepad input does not interact with the layout. Defaults to true.

Padding: UDim#

ReadSafe

Determines the amount that pages are separated from each other by. Can be set either using scale (Percentage of parent's size in the current direction) or offset (a static spacing value, similar to pixel size).

ScrollWheelInputEnabled: boolean#

ReadSafe

When set to true, mouse scroll wheel input navigates between pages. Scrolling up moves to the previous page and scrolling down moves to the next page. Set this to false when the scroll wheel is intended for other interactions in the UI. Defaults to true.

TouchInputEnabled: boolean#

ReadSafe

When set to true, touch-based swipe gestures navigate between pages. Set this to false for layouts where touch input should not trigger page transitions, such as non-interactive displays. Defaults to true.

TweenTime: float#

ReadSafe

The duration, in seconds, of the animated transition when navigating between pages. The value is clamped to a minimum of 0.01. Only takes effect when UIPageLayout.Animated is true. Defaults to 1.

Methods 4#

JumpToIf the page is in the UIPageLayout, then it sets UIPageLayout.CurrentPage to it and animates to it. If the circular layout is enabled, it will take the shortest path to this page.
JumpToIndexIf the index is >= 0 and less than the size of the layout, this method acts like UIPageLayout:JumpTo(). Out-of-bounds indices are wrapped modulo the page count to determine the target page.
NextSets UIPageLayout.CurrentPage to the page after the current page and animates to it, or does nothing if there isn't a next page.
PreviousSets UIPageLayout.CurrentPage to the page before the current page and animates to it, or does nothing if there isn't a previous page.

JumpTo(page: Instance): ()#

Navigates to a specific page within the layout. The page argument must be a GuiObject that is a visible sibling managed by this layout; passing nil or an instance that is not part of the layout throws an error. Sets UIPageLayout.CurrentPage to the target and animates the transition (or jumps instantly if UIPageLayout.Animated is false). When UIPageLayout.Circular is true, the animation takes the shortest rotational path to the target page.

NameTypeDefaultDescription
pageInstanceThe GuiObject sibling to navigate to.
Returns
  • ()

JumpToIndex(index: int): ()#

Navigates to the page at the given zero-based index in layout order. If the index is within the valid range (0 to page count minus 1), this method behaves like UIPageLayout:JumpTo(). Out-of-bounds indices are wrapped modulo the page count to determine the final page.

NameTypeDefaultDescription
indexintThe zero-based position of the target page in layout order.
Returns
  • ()

Next(): ()#

Advances UIPageLayout.CurrentPage to the next page in layout order and animates the transition (or jumps instantly if UIPageLayout.Animated is false). If the current page is already the last page and UIPageLayout.Circular is false, this method does nothing. If UIPageLayout.Circular is true, it wraps from the last page to the first.

Returns
  • ()

Previous(): ()#

Moves UIPageLayout.CurrentPage to the previous page in layout order and animates the transition (or jumps instantly if UIPageLayout.Animated is false). If the current page is already the first page and UIPageLayout.Circular is false, this method does nothing. If UIPageLayout.Circular is true, it wraps from the first page to the last.

Returns
  • ()

Events 3#

PageEnterFires when a page comes into view, and is going to be rendered.
PageLeaveFires when a page leaves view, and will not be rendered.
StoppedFires when an animation to UIPageLayout.CurrentPage is completed without being canceled, and the view stops scrolling.

PageEnter(page: Instance)#

Fires when a sibling page's bounding rect begins intersecting the parent's clip region, causing it to become visible and rendered. The page parameter is the GuiObject that entered view. This event fires on the frame the page's visibility flips from hidden to shown, whether due to an animated transition, a programmatic jump, or user input scrolling.

NameTypeDefaultDescription
pageInstanceThe GuiObject that entered view.

PageLeave(page: Instance)#

Fires when a sibling page's bounding rect stops intersecting the parent's clip region, causing it to become hidden and no longer rendered. The page parameter is the GuiObject that left view. This event fires on the frame the page's visibility flips from shown to hidden, whether due to an animated transition, a programmatic jump, or user input scrolling.

NameTypeDefaultDescription
pageInstanceThe GuiObject that left view.

Stopped(currentPage: Instance)#

Fires when a page-navigation animation reaches its target without being interrupted by new input, and the view comes to rest. The currentPage parameter is the GuiObject now displayed. This event does not fire for programmatic transitions made while UIPageLayout.Animated is false, since those snap to the target page instantly.

NameTypeDefaultDescription
currentPageInstanceThe GuiObject now displayed after the transition completed.

Inherited members#

Inherited from UIGridStyleLayout 7
Inherited from Instance 58
Inherited from Object 6
Properties (2)

ClassName, className

Events (1)

Changed