Modal

Properties

ModalActions

Name	Type	Default	Description
text	string		Text hiển thị của action
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

Modal

Name	Type	Default	Description
mask	boolean		Hiển thị mask
afterClose	function		Function được gọi sau khi modal đóng
onClose	function		Function được gọi khhi modal đóng
maskClosable	boolean		Có thể đóng modal khi click vào mask
visible	boolean		Hiển thị modal
title	string		Title của modal
coverSrc	string		src của cover image
modalStyle	React.CSSProperties		Style modal
maskStyle	React.CSSProperties		Style mask
modalClassName	string		Modal class name
maskClassName	string		Mask class name
width	string | number		Modal width
height	string | number		Modal height
description	string		Modal description
actions	ModalActions		Modal actions list
actionsDivider	boolean		Hiển thị divider giữa các action
zIndex	number		Giá trị zindex của modal

Example

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

function HomePage(props){
    const [modalVisible, setModalVisible] = useState(false);
    return (
        <Page>
            <Button onClick={() => {setModalVisible(true)}}>Open Modal</Button>
            <Modal
                visible={modalVisible}
                title="ZaUI 2.0 Modal"
                coverSrc={"https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8"}
                onClose={() => {
                    setModalVisible(false);
                }}
                zIndex={1200}
                actions={[
                    {
                        text: "Button",
                    },
                    {
                        text: "Cancel",
                        close: true,
                        highLight: true,
                    },
                ]}
                description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
            />
        </Page>
    );
}