Display a modal dialog box, providing a title, content area, and action buttons.
Display a modal dialog box, providing a title, content area, and action buttons.
import { Modal } from '@yuntijs/ui';based on antd Modal component.
import { useState } from 'react';
export default () => {
const [open, setOpen] = useState < boolean > false;
const [confirmLoading, setConfirmLoading] = useState < boolean > false;
return (
<>
<Button
onClick={() => {
setOpen(true);
}}
>
Open Modal
</Button>
<Modal
title="YuntiUI Modal"
open={open}
confirmLoading={confirmLoading}
onCancel={() => setOpen(false)}
onOk={() => {
setConfirmLoading(true);
}}
>
The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully
compatible with Antd components, and it is recommended to use antd-style as the default
css-in-js styling solution.
</Modal>
</>
);
};| Name | Description | Type | Default |
|---|---|---|---|
| open | Whether the modal dialog is visible or not | boolean | -- |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | -- |
| title | The modal dialog's title | ReactNode | -- |
| onOk | Specify a function that will be called when a user clicks the OK button | (e:React.MouseEvent<HTMLButtonElement, MouseEvent>)=>void | -- |
| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | (e:React.MouseEvent<HTMLButtonElement, MouseEvent>)=>void | -- |
| afterClose | -- | ()=>void | -- |
| afterOpenChange | Callback when the animation ends when Modal is turned on and off | (open:boolean)=>void | -- |
| centered | Centered Modal | boolean | -- |
| width | Width of the modal dialog | string|number|Partial___type | -- |
| okText | Text of the OK button | ReactNode | -- |
| okType | Button `type` of the OK button | "default"|"link"|"text"|"primary"|"dashed"|"danger" | -- |
| cancelText | Text of the Cancel button | ReactNode | -- |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | -- |
| forceRender | Force render Modal | boolean | -- |
| okButtonProps | -- | unknown | -- |
| cancelButtonProps | -- | unknown | -- |
| destroyOnClose | -- | boolean | -- |
| destroyOnHidden | -- | boolean | -- |
| style | -- | {} | -- |
| wrapClassName | -- | string | -- |
| maskTransitionName | -- | string | -- |
| transitionName | -- | string | -- |
| className | -- | string | -- |
| rootClassName | -- | string | -- |
| classNames | -- | any | -- |
| getContainer | -- | string|HTMLElement|getContainerFunc| | -- |
| zIndex | -- | number | -- |
| bodyStyle | -- | {} | -- |
| maskStyle | -- | {} | -- |
| mask | -- | boolean | -- |
| keyboard | -- | boolean | -- |
| wrapProps | -- | any | -- |
| prefixCls | -- | string | -- |
| closeIcon | -- | ReactNode | -- |
| modalRender | -- | (node:React.ReactNode)=>|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|boolean | -- |
| focusTriggerAfterClose | -- | boolean | -- |
| children | -- | ReactNode | -- |
| mousePosition | -- | |{x:number;y:number} | -- |
| visible | -- | boolean | -- |
| loading | -- | boolean | -- |
| footer | -- | ReactNode|(originNode:React.ReactNode,extra:{ OkBtn: React.FC<{}>; CancelBtn: React.FC<{}>; })=>|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|boolean | -- |