hakowork/rojo
3
0
Fork 0
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-10-25 04:54:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

rules

Browse source
This commit is contained in:
Joe 2026-02-02 12:08:47 -06:00
parent a9b4f8e83b
commit e6efc04756
8494 changed files with 495610 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

60
.cursor/rules/roblox/ui/page-layouts.md Normal file
View file

@ -0,0 +1,60 @@
---
title: Page layouts
description: Explore how page layouts organize interface content into distinct pages.
---
When you parent a `Class.UIPageLayout` to a UI container, every sibling `Class.GuiObject` becomes a unique page that you can transition to through scripting. This layout is useful when you want to create user interfaces such as tabbed modals, tutorials, or character customization screens.
<img src="../assets/studio/explorer/UIPageLayout.png" width="320" />
After you create multiple pages within the `Class.UIPageLayout`, you need to use scripting to transition from page to page. For example, the following code, pasted into a client‑side sibling `Class.Script` of the layout, transitions forward and then backward between the pages every two seconds.
```lua
local frame = script.Parent
local pageLayout = frame:FindFirstChildWhichIsA("UIPageLayout")
task.wait(2)
pageLayout:Next()
task.wait(2)
pageLayout:Next()
task.wait(2)
pageLayout:Previous()
task.wait(2)
pageLayout:Previous()
```
If you want to view pages while editing in Studio, you can use the [Command Bar](../studio/ui-overview.md#command-bar) to navigate from one page to another, letting you review where you need to make changes without having to play your experience each time.
1. In the [Explorer](../studio/explorer.md) window hierarchy, select the `Class.UIPageLayout` object.
<img src="../assets/studio/explorer/UIPageLayout.png" width="320" />
2. Open the [Command Bar](../studio/ui-overview.md#command-bar).
3. Input any of the following commands and press <kbd>Enter</kbd>.
<table>
<thead>
<tr>
<td>Action</td>
<td>Command</td>
</tr>
</thead>
<tbody>
<tr>
<td>**Next Page**</td>
<td>`game:GetService("Selection"):Get()[1]:Next()`</td>
</tr>
<tr>
<td>**Previous Page**</td>
<td>`game:GetService("Selection"):Get()[1]:Previous()`</td>
</tr>
<tr>
<td>**First Page**</td>
<td>`game:GetService("Selection"):Get()[1]:JumpToIndex(0)`</td>
</tr>
</tbody>
</table>