Sheet

Page component: Component wrapper nội dung trang

Properties

Sheet

Name	Type	Default	Description
mask	boolean		Hiển thị mask khi show sheet
afterClose	function		Function gọi sai khi close sheet
onClose	function		Function gọi khi close sheet
maskClosable	boolean		Đóng sheet khi click bào mask
visible	boolean		Hiển thị sheet modal
title	string		Title của sheet modal
modalStyle	React.CSSProperties		Style modal
maskStyle	React.CSSProperties		Style mask
modalClassName	string		Modal class name
maskClassName	string		Mask class name
width	string | number		Sheet width
height	string | number		Sheet height
description	string		Sheet description
children	React.ReactNode		Nội dung sheet
zIndex	number		Giá trị z-index của modal
handler	boolean		Sheet handler
autoHeight	boolean	false	Chiều cao của sheet ôm theo content
swipeToClose	boolean		Vuốt xuống để đóng sheet modal
snapPoints	number[] | ({sheetModalHeight}) => number[]		Các snap points là vị trí của action sheet tính theo thuộc tính bottom css number[]: các snap points tính theo %, với 1 (100%) -> 0(0%) ({sheetModalHeight}) => number[]: callback function với arg chứa chiều cao của sheet, cần return mảng các snap points tính theo px
defaultSnapPoint	number		Index của snapPoints mặc định khi mở sheet modal
onSnap	(snapPoint: number) => void		callback function khi expand/collapse đến một snap point mới
ref	SheetRef		Sheet modal ref

Type

SheetRef

Name	Type	Default	Description
sheet	HTMLDivElement		Sheet modal element
snapTo	(index: number)=> void		Expand/collapse Sheet modal đến snap point cụ thể trong snapPoints đã khai báo

Sheet.Action

Name	Type	Default	Description
divider	boolean		Có divider giữa các action
actions	ActionButton[]		Danh sách các action
groupDivider	boolean		Có divider giữa các group action

ActionButton

Name	Type	Default	Description
highLight	boolean		Nếu giá trị là true action sẽ có kiểu highlight
danger	boolean		Nếu giá trị là true action sẽ có kiểu danger
onClick	function		Function sẽ được gọi khi click action
close	boolean		Action sau khi click sẽ close modal
disabled	boolean		Disable action

Example

Sheet

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

function HomePage(props) {
  const [sheetVisible, setSheetVisible] = useState(false);
  return (
    <Page>
      <Button
        onClick={() => {
          setSheetVisible(true);
        }}
      >
        Open Sheet
      </Button>
      <Sheet
        visible={sheetVisible}
        onClose={() => setSheetVisible(false)}
        title="Action Sheet"
      >
        Sheet content
      </Sheet>
    </Page>
  );
}

Sheet snapPoint

import React, { useRef, useState } from "react";
import { Button, Sheet, Text, Box, Page } from "zmp-ui";

const Demo = () => {
  const sheetRef = useRef();
  const [sheetVisible, setSheetVisible] = useState(false);
  return (
    <Page>
      <Box m={4}>
        <Button
          onClick={() => {
            setSheetVisible(true);
          }}
        >
          Open Sheet
        </Button>
      </Box>
      <Sheet
        visible={sheetVisible}
        onClose={() => setSheetVisible(false)}
        autoHeight
        mask
        ref={sheetRef}
        handler
        swipeToClose
        defaultSnapPoint={1}
        snapPoints={[0.8, 0.4, 0]}
        onSnap={(nap) => {
          console.log("current point", nap);
        }}
      >
        <Box p={4} flex flexDirection="column">
          <Box my={4}>
            <Text.Title>
              Cho phép Starbucks Coffee xác định vị trí của bạn
            </Text.Title>
          </Box>
          <Box>
            <Button
              onClick={() => {
                sheetRef.current.snapTo(2);
              }}
            >
              Expand
            </Button>
          </Box>
          <Box style={{ overflowY: "auto" }}>
            <Text>
              Starbucks Coffee sẽ sử dụng vị trí của bạn để hỗ trợ giao nhận
              hàng, tìm kiếm dịch vụ, bạn bè quanh bạn, hoặc các dịch vụ liên
              quan đến địa điểm khác.
              <br />
              Starbucks Coffee sẽ sử dụng vị trí của bạn để hỗ trợ giao nhận
              hàng, tìm kiếm dịch vụ, bạn bè quanh bạn, hoặc các dịch vụ liên
              quan đến địa điểm khác.
              <br />
              Starbucks Coffee sẽ sử dụng vị trí của bạn để hỗ trợ giao nhận
              hàng, tìm kiếm dịch vụ, bạn bè quanh bạn, hoặc các dịch vụ liên
              quan đến địa điểm khác.
            </Text>
          </Box>
          <Box flex flexDirection="row" mt={1}>
            <Box style={{ flex: 1 }} pr={1}>
              <Button
                fullWidth
                variant="secondary"
                onClick={() => {
                  setSheetVisible(false);
                }}
              >
                Để sau
              </Button>
            </Box>
            <Box style={{ flex: 1 }} pl={1}>
              <Button
                fullWidth
                onClick={() => {
                  setSheetVisible(false);
                }}
              >
                Cho phép
              </Button>
            </Box>
          </Box>
        </Box>
      </Sheet>
    </Page>
  );
};

export default Demo;

ActionSheet

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

function HomePage(props) {
  const [sheetVisible, setSheetVisible] = useState(false);
  return (
    <Page>
      <Button
        onClick={() => {
          setSheetVisible(true);
        }}
      >
        Open Sheet
      </Button>
      <Sheet.Actions
        visible={sheetVisible}
        title="Action Sheet"
        onClose={() => setSheetVisible(false)}
        actions={[
          [
            {
              text: "button",
              onClick: () => {
                alert("click");
              },
            },
            { text: "button", highLight: true },
          ],
          [{ text: "cancel", close: true, danger: true }],
        ]}
      />
    </Page>
  );
}