--- name: UIPageLayout last_updated: 2026-06-10T02:17:47Z inherits: - UIGridStyleLayout - UILayout - UIComponent - UIBase - Instance - Object type: class memory_category: Instances --- # Class: UIPageLayout ## Description 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 ### Property: UIPageLayout.Animated ```json { "type": "boolean", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Appearance", "capabilities": [ "UI" ] } ``` Whether or not to animate transitions between pages. ### Property: UIPageLayout.Circular ```json { "type": "boolean", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Appearance", "capabilities": [ "UI" ] } ``` Whether or not the page layout wraps around at the ends. ### Property: UIPageLayout.CurrentPage ```json { "type": "GuiObject", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": false, "can_save": true }, "thread_safety": "ReadSafe", "category": "Data", "capabilities": [ "UI" ] } ``` The page that is either currently being displayed or is the target of the current animation. ### Property: UIPageLayout.EasingDirection ```json { "type": "EasingDirection", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Appearance", "capabilities": [ "UI" ] } ``` The easing direction to use when performing an animation. ### Property: UIPageLayout.EasingStyle ```json { "type": "EasingStyle", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Appearance", "capabilities": [ "UI" ] } ``` The easing style to use when performing an animation. ### Property: UIPageLayout.GamepadInputEnabled ```json { "type": "boolean", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Input", "capabilities": [ "UI" ] } ``` Controls the overrides of `NextSelection{Up,Down,Left,Right}`. Defaults to true. ### Property: UIPageLayout.Padding ```json { "type": "UDim", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Appearance", "capabilities": [ "UI" ] } ``` 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). ### Property: UIPageLayout.ScrollWheelInputEnabled ```json { "type": "boolean", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Input", "capabilities": [ "UI" ] } ``` Controls the use of scroll wheel, in case that it is intended for something else. Defaults to true. ### Property: UIPageLayout.TouchInputEnabled ```json { "type": "boolean", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Input", "capabilities": [ "UI" ] } ``` Controls touch scrolling, in case this is a non-interactive layout. Defaults to true. ### Property: UIPageLayout.TweenTime ```json { "type": "float", "access": "ReadWrite", "security": { "read": "None", "write": "None" }, "serialization": { "can_load": true, "can_save": true }, "thread_safety": "ReadSafe", "category": "Appearance", "capabilities": [ "UI" ] } ``` The length of the animation. ## Methods ### Method: UIPageLayout:JumpTo **Signature:** `UIPageLayout:JumpTo(page: Instance): ()` If the `page` is in the UIPageLayout, then it sets [UIPageLayout.CurrentPage](/docs/reference/engine/classes/UIPageLayout.md) to it and animates to it. If the circular layout is enabled, it will take the shortest path to this page. *Security: None · Thread Safety: Unsafe · Capabilities: UI* **Parameters:** | Name | Type | Default | Description | |------|------|---------|-------------| | `page` | `Instance` | | | **Returns:** `()` ### Method: UIPageLayout:JumpToIndex **Signature:** `UIPageLayout:JumpToIndex(index: int): ()` If the index is `>= 0` and less than the size of the layout, this method acts like [UIPageLayout:JumpTo()](/docs/reference/engine/classes/UIPageLayout.md). If it's out of bounds and circular is set, it will animate the full distance between the in-bounds index of [UIPageLayout.CurrentPage](/docs/reference/engine/classes/UIPageLayout.md) and the new index. *Security: None · Thread Safety: Unsafe · Capabilities: UI* **Parameters:** | Name | Type | Default | Description | |------|------|---------|-------------| | `index` | `int` | | | **Returns:** `()` ### Method: UIPageLayout:Next **Signature:** `UIPageLayout:Next(): ()` Sets [UIPageLayout.CurrentPage](/docs/reference/engine/classes/UIPageLayout.md) to the page after the current page and animates to it, or does nothing if there isn't a next page. *Security: None · Thread Safety: Unsafe · Capabilities: UI* **Returns:** `()` ### Method: UIPageLayout:Previous **Signature:** `UIPageLayout:Previous(): ()` Sets [UIPageLayout.CurrentPage](/docs/reference/engine/classes/UIPageLayout.md) to the page before the current page and animates to it, or does nothing if there isn't a previous page. *Security: None · Thread Safety: Unsafe · Capabilities: UI* **Returns:** `()` ## Events ### Event: UIPageLayout.PageEnter **Signature:** `UIPageLayout.PageEnter(page: Instance)` Fires when a page comes into view, and is going to be rendered. *Security: None · Capabilities: UI* **Parameters:** | Name | Type | Description | |------|------|-------------| | `page` | `Instance` | | ### Event: UIPageLayout.PageLeave **Signature:** `UIPageLayout.PageLeave(page: Instance)` Fires when a page leaves view, and will not be rendered. *Security: None · Capabilities: UI* **Parameters:** | Name | Type | Description | |------|------|-------------| | `page` | `Instance` | | ### Event: UIPageLayout.Stopped **Signature:** `UIPageLayout.Stopped(currentPage: Instance)` Fires when an animation to [UIPageLayout.CurrentPage](/docs/reference/engine/classes/UIPageLayout.md) is completed without being canceled, and the view stops scrolling. *Security: None · Capabilities: UI* **Parameters:** | Name | Type | Description | |------|------|-------------| | `currentPage` | `Instance` | | ## Inherited Members ### From [UIGridStyleLayout](/docs/reference/engine/classes/UIGridStyleLayout.md) - **Property `AbsoluteContentSize`** (`Vector2`): The absolute size of space being taken up by the grid layout. - **Property `FillDirection`** (`FillDirection`): Determines the axis in which UI objects are laid out. - **Property `HorizontalAlignment`** (`HorizontalAlignment`): Determines the horizontal alignment of UI elements within the parent - **Property `SortOrder`** (`SortOrder`): Determines the order in which child UI objects are placed in a layout. - **Property `VerticalAlignment`** (`VerticalAlignment`): Determines the vertical alignment of UI elements within the parent - **Method `ApplyLayout(): ()`**: Force re-layout of sibling UI elements. *(deprecated)* - **Method `SetCustomSortFunction(function?: Function): ()`**: Sets the function used to determine the order of elements when SortOrder *(deprecated)* ### From [Instance](/docs/reference/engine/classes/Instance.md) - **Property `Archivable`** (`boolean`): Determines if an Instance and its descendants can be cloned using - **Property `archivable`** (`boolean`): *(deprecated, hidden)* - **Property `Capabilities`** (`SecurityCapabilities`): The set of capabilities allowed to be used for scripts inside this - **Property `Name`** (`string`): A non-unique identifier of the Instance. - **Property `Parent`** (`Instance`): Determines the hierarchical parent of the Instance. - **Property `PredictionMode`** (`PredictionMode`): - **Property `RobloxLocked`** (`boolean`): A deprecated property that used to protect CoreGui objects. *(hidden)* - **Property `Sandboxed`** (`boolean`): When enabled, the instance can only access abilities in its `Capabilities` - **Property `UniqueId`** (`UniqueId`): A unique identifier for the instance. - **Method `AddTag(tag: string): ()`**: Applies a tag to the instance. - **Method `children(): Instances`**: Returns an array of the object's children. *(deprecated)* - **Method `ClearAllChildren(): ()`**: This method destroys all of an instance's children. - **Method `Clone(): Instance`**: Create a copy of an instance and all its descendants, ignoring instances - **Method `clone(): Instance`**: *(deprecated)* - **Method `Destroy(): ()`**: Sets the Instance.Parent property to `nil`, locks the - **Method `destroy(): ()`**: *(deprecated)* - **Method `FindFirstAncestor(name: string): Instance?`**: Returns the first ancestor of the Instance whose - **Method `FindFirstAncestorOfClass(className: string): Instance?`**: Returns the first ancestor of the Instance whose - **Method `FindFirstAncestorWhichIsA(className: string): Instance?`**: Returns the first ancestor of the Instance for whom - **Method `FindFirstChild(name: string, recursive?: boolean): Instance?`**: Returns the first child of the Instance found with the given name. - **Method `findFirstChild(name: string, recursive?: boolean): Instance`**: *(deprecated)* - **Method `FindFirstChildOfClass(className: string): Instance?`**: Returns the first child of the Instance whose - **Method `FindFirstChildWhichIsA(className: string, recursive?: boolean): Instance?`**: Returns the first child of the Instance for whom - **Method `FindFirstDescendant(name: string): Instance?`**: Returns the first descendant found with the given Instance.Name. - **Method `GetActor(): Actor?`**: Returns the Actor associated with the Instance, if any. - **Method `GetAttribute(attribute: string): Variant`**: Returns the value which has been assigned to the given attribute name. - **Method `GetAttributeChangedSignal(attribute: string): RBXScriptSignal`**: Returns an event that fires when the given attribute changes. - **Method `GetAttributes(): Dictionary`**: Returns a dictionary of the instance's attributes. - **Method `GetChildren(): Instances`**: Returns an array containing all of the instance's children. - **Method `getChildren(): Instances`**: *(deprecated)* - **Method `GetDebugId(scopeLength?: int): string`**: Returns a coded string of the debug ID used internally by Roblox. - **Method `GetDescendants(): Instances`**: Returns an array containing all of the descendants of the instance. - **Method `GetFullName(): string`**: Returns a string describing the instance's ancestry. - **Method `GetStyled(name: string, selector: string?): Variant`**: Returns the styled or explicitly modified value of the specified property, - **Method `GetStyledPropertyChangedSignal(property: string): RBXScriptSignal`**: - **Method `GetTags(): Array`**: Gets an array of all tags applied to the instance. - **Method `HasTag(tag: string): boolean`**: Check whether the instance has a given tag. - **Method `IsAncestorOf(descendant: Instance): boolean`**: Returns true if an Instance is an ancestor of the given - **Method `IsDescendantOf(ancestor: Instance): boolean`**: Returns `true` if an Instance is a descendant of the given - **Method `isDescendantOf(ancestor: Instance): boolean`**: *(deprecated)* - **Method `IsPropertyModified(property: string): boolean`**: Returns `true` if the value stored in the specified property is not equal - **Method `QueryDescendants(selector: string): Instances`**: - **Method `Remove(): ()`**: Sets the object's `Parent` to `nil`, and does the same for all its *(deprecated)* - **Method `remove(): ()`**: *(deprecated)* - **Method `RemoveTag(tag: string): ()`**: Removes a tag from the instance. - **Method `ResetPropertyToDefault(property: string): ()`**: Resets a property to its default value. - **Method `SetAttribute(attribute: string, value: Variant): ()`**: Sets the attribute with the given name to the given value. - **Method `WaitForChild(childName: string, timeOut: double): Instance`**: Returns the child of the Instance with the given name. If the - **Event `AncestryChanged`**: Fires when the Instance.Parent property of this object or one of - **Event `AttributeChanged`**: Fires whenever an attribute is changed on the Instance. - **Event `ChildAdded`**: Fires after an object is parented to this Instance. - **Event `childAdded`**: *(deprecated)* - **Event `ChildRemoved`**: Fires after a child is removed from this Instance. - **Event `DescendantAdded`**: Fires after a descendant is added to the Instance. - **Event `DescendantRemoving`**: Fires immediately before a descendant of the Instance is removed. - **Event `Destroying`**: Fires immediately before (or is deferred until after) the instance is - **Event `StyledPropertiesChanged`**: Fires whenever any style property is changed on the instance, including ### From [Object](/docs/reference/engine/classes/Object.md) - **Property `ClassName`** (`string`): A read-only string representing the class this Object belongs to. - **Property `className`** (`string`): *(deprecated)* - **Method `GetPropertyChangedSignal(property: string): RBXScriptSignal`**: Get an event that fires when a given property of the object changes. - **Method `IsA(className: string): boolean`**: Returns true if an object's class matches or inherits from a given class. - **Method `isA(className: string): boolean`**: *(deprecated)* - **Event `Changed`**: Fires immediately after a property of the object changes, with some