---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/layout/Page
title: Page
---
```ts
import { Page } from "zmp-ui";
```


Dùng để hiển thị nội dung một trang trong ứng dụng, cần kết hợp với `ZMPRouter` hoặc `react-router`. Hỗ trợ các thiết lập liên quan đến cuộn trang.

## Ví dụ



## Bảng thuộc tính


| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| children | ReactNode | No |  | Nội dung của trang |
| resetScroll | boolean | No | true | Khi dùng với React Router, mặc định vị trí scroll của sẽ giữ nguyên khi navigate giữa các trang. Thuộc tính này sẽ reset scroll về đầu trang khi navigate giữa các trang, tương tự như cơ chế chuyển trang thông thường. |
| hideScrollbar | boolean | No | false | Ẩn thanh cuộn của trang (scrollbar) |
| restoreScroll | boolean | No | false | Khôi phục lại vị trí scroll của trang nếu đã được scroll trước đây. Khác với `resetScrollOnBack`, thuộc tính này sẽ luôn khôi phục lại vị trí scroll bất kể được navigate đến từ đâu. |
| restoreScrollOnBack | boolean | No | false | Khôi phục lại vị trí scroll của trang khi quay về từ một trang khác (khi người dùng nhấn nút back, thực hiện cử chỉ vuốt từ cạnh màn hình, hoặc `navigate(-1)` từ code). |
| name | string | No |  | Tên của trang, dùng để phân biệt các trang với nhau. Thuộc tính này còn có thể sử dụng để định danh vị trí scroll của trang, nếu `restoreScroll` hoặc `restoreScrollOnBack` được thiết lập. |


:::info Tips

- Với các trang trong Tabs, dùng `restoreScroll` để khôi phục vị trí khi chuyển tab hoặc quay lại từ trang khác.
- Với trang thông thường, dùng `restoreScrollOnBack` để khôi phục vị trí khi quay lại từ trang khác.
- Nếu trang có trạng thái đặc biệt như: menu thu gọn, phân trang, infinite scroll,… nên lưu dữ liệu ở global state để đảm bảo khôi phục đúng trạng thái trước đó và cải thiện UX cho mini app.

:::