mirror of
https://github.com/rojo-rbx/rojo.git
synced 2026-10-25 13:31:37 +00:00
60 lines
2 KiB
Markdown
60 lines
2 KiB
Markdown
---
|
||
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>
|