Page

Cập nhật lần cuối: 27/05/2022

Page component: Component wrapper nội dung trang

Lưu ý:

Kể từ Version 1.8.0, Page cần được sử dụng với react-router hoặc ZMPRouter.

Properties

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

• Đối với các trang được hiển thị dạng Tabs, cần khôi phục vị trí khi switch tab, back từ trang khác nên sử dụng restoreScroll
• Trường hợp thông thường, chỉ cần khôi phục vị trí khi back từ trang khác nên sử dụng restoreScrollOnBack
• Đối với trang có state đặc biệt như: collapse menu, pagination, infinite scroll list,… nên store data dạng global state, để khi khôi phục vị trí về đúng trạng thái trước đó của trang, đảm bảo UX cho mini app.

Example

Open Sandbox

import React from "react";
import { Page, Input } from "zmp-ui";

export default function HomePage(props) {
  return (
    <Page className="section-container" hideScrollbar={true}>
      <Input label="Label" helperText="Helper text" />
    </Page>
  );
}