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

Page

Name	Type	Default	Description
children	ReactNode		Nội dung trang
resetScroll	boolean	true	Scroll lên đầu trang khi chuyển trang khi dùng với react-router
hideScrollbar	boolean	false	Ẩn thanh scroll bar
restoreScroll	boolean	false	luôn khôi phục vị trí cuộn khi truy cập vào trang
restoreScrollOnBack	boolean	false	chỉ khôi phục vị trí cuộn trang khi “back” từ trang khác
name	string		đặt unique name cho trang, nên sử dụng trong trường hợp sử dụng restoreScroll

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>
  );
}