Ant Design Modal
In Ant Design, the Modal component is used to create a modal or dialog box to display additional content or gather user input.
Syntax
import { Modal } from 'antd';
const showModal = () => {
Modal.info({
title: 'This is a Modal',
content: 'Some content goes here...',
});
};
Use
The Ant Design Modal component is used to display a modal window on a web page. It provides a way to display important information to the user, and requires user interaction before the user can continue interacting with the site.
Importance
Modals are common in web design and can be used for a variety of purposes, including displaying important messages to a user, collecting information from a user, or displaying a confirmation or warning message before a user performs an action.
The Ant Design Modal component is important because it provides a clean and easy-to-use interface for displaying modals on a web page. It is highly customizable, and has a variety of options for controlling the appearance of the modal and the behavior of the user interaction.
Example
import { Modal, Button } from 'antd';
import { useState } from 'react';
const App = () => {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return (
<>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</>
);
};
Summary
The Ant Design Modal component provides a clean and easy-to-use interface for displaying modals on a web page. It is highly customizable, and has a variety of options for controlling the appearance of the modal and the behavior of the user interaction. Modals are common in web design and can be used for a variety of purposes, including displaying important messages to a user, collecting information from a user, or displaying a confirmation or warning message before a user performs an action.