Page

Cập nhật lần cuối: 23/6/2025

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

Name	Type	Default	Description
children	ReactNode		Nội dung của trang
hideScrollbar	boolean	false	Ẩn thanh cuộn của trang (scrollbar)
name	string		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.
resetScroll	boolean	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.
restoreScroll	boolean	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	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).

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.