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	Minimum Version
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
unmountOnClose	boolean	false	Unmount sau khi đóng modal	1.6.0
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

Open Sandbox

import React, { useState } from 'react';
import { Page, Button, Text, Modal, Box } from 'zmp-ui';

export default function HomePage(props) {
  const [modalVisible, setModalVisible] = useState(false);
  const [dialogVisible, setDialogVisible] = useState(false);
  const [vDialogVisible, setVDialogVisible] = useState(false);
  const [popupVisible, setPopupVisible] = useState(false);
  return (
    <Page className='section-container'>
      <Text.Title size='small'>Dialog & Modal</Text.Title>
      <Box mt={4}>
        <Button
          variant='secondary'
          fullWidth
          onClick={() => {
            setDialogVisible(true);
          }}
        >
          Info Dialog
        </Button>
      </Box>
      <Box mt={4}>
        <Button
          variant='secondary'
          fullWidth
          onClick={() => {
            setVDialogVisible(true);
          }}
        >
          Info Dialog Vertical Actions
        </Button>
      </Box>
      <Box mt={4}>
        <Button
          variant='secondary'
          fullWidth
          onClick={() => {
            setPopupVisible(true);
          }}
        >
          Custom Modal
        </Button>
      </Box>
      <Box mt={4}>
        <Button
          variant='secondary'
          fullWidth
          onClick={() => {
            setModalVisible(true);
          }}
        >
          Custom Modal With Cover
        </Button>
      </Box>
      <Modal
        visible={dialogVisible}
        title='This is the title'
        onClose={() => {
          setDialogVisible(false);
        }}
        actions={[
          {
            text: 'Button'
          },
          {
            text: 'Button',
            close: true,
            highLight: true
          }
        ]}
        description='This is a very long message that can be displayed in 3 lines'
      />
      <Modal
        visible={vDialogVisible}
        title='This is the title'
        onClose={() => {
          setVDialogVisible(false);
        }}
        verticalActions
        actions={[
          {
            text: 'Long Text Button'
          },
          {
            text: 'Long Text Button',
            close: true,
            highLight: true
          }
        ]}
        description='This is a very long message that can be displayed in 3 lines'
      />
      <Modal
        visible={popupVisible}
        title='This is the title'
        onClose={() => {
          setPopupVisible(false);
        }}
        verticalActions
        description='This is a very long message that can be displayed in 3 lines'
      >
        <Box p={6}>
          <Button
            onClick={() => {
              setPopupVisible(false);
            }}
            fullWidth
          >
            Xác nhận
          </Button>
        </Box>
      </Modal>
      <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>
  );
}