对话框 Modal

模态对话框用于显示重要的信息或请求用户输入。它会中断用户的当前操作，直到用户与对话框进行交互。

何时使用

• 需要用户确认某些操作时
• 显示重要信息时
• 收集用户输入时
• 展示详细内容时

示例

基础用法

最简单的对话框，包含标题、内容和默认的操作按钮。

无标题对话框

可以通过省略 title 属性来创建无标题的对话框。

无底部对话框

通过设置 showFooter 为 false 来隐藏底部操作区域。

禁止点击蒙层关闭

通过设置 closeByOverlay 为 false 来禁止用户通过点击蒙层关闭对话框。

不可关闭对话框

通过设置 closable 和 closeByOverlay 为 false 来创建不可关闭的对话框。

自定义宽度

通过 width 属性来自定义对话框的宽度。

长内容对话框

当内容较长时，对话框会自动显示滚动条。

确认对话框

用于确认危险操作的对话框，通常会将确认按钮设置为危险样式。

自定义按钮文字和变种

可以通过 okText、cancelText 和按钮属性来自定义按钮的文字和样式。

只有确认按钮

通过设置 showCancel 为 false 来只显示确认按钮。

表单对话框

在对话框中嵌入表单以收集用户输入。

自定义底部

通过 footer 属性来自定义底部内容。

深色模式

在深色模式下，对话框会自动适应主题颜色。

import { useState } from 'react';
import { Modal, Button } from '@apron-design/react';

export default function DarkModeModal() {
  const [open, setOpen] = useState(false);

  return (
    <div data-theme="dark" style={{ padding: '32px', backgroundColor: '#18181b', borderRadius: '12px' }}>
      <Button onClick={() => setOpen(true)}>Dark Mode Modal</Button>
      <Modal
        open={open}
        title="深色模式"
        onClose={() => setOpen(false)}
        footer={
          <>
            <Button onClick={() => setOpen(false)}>取消</Button>
            <Button onClick={() => setOpen(false)}>确定</Button>
          </>
        }
      >
        <p>这是深色模式下的对话框。</p>
      </Modal>
    </div>
  );
}

:::

API

Modal Props

参数	说明	类型	默认值
open	是否显示对话框	boolean	false
title	标题	ReactNode	-
closable	是否显示关闭按钮	boolean	true
closeByOverlay	点击蒙层是否可以关闭	boolean	true
onClose	关闭时的回调	() => void	-
onOk	点击确认按钮的回调	() => void	-
width	对话框宽度	number | string	520
footer	自定义 footer，设置为 null 则不显示	ReactNode | null	-
showFooter	是否显示 footer	boolean	true
okText	确认按钮文字	string	'确定'
cancelText	取消按钮文字	string	'取消'
okButtonProps	确认按钮属性	ButtonProps	-
cancelButtonProps	取消按钮属性	ButtonProps	-
showCancel	是否显示取消按钮	boolean	true
children	子元素（正文内容）	ReactNode	-
className	自定义类名	string	-
centered	是否居中显示	boolean	true
afterOpenChange	打开/关闭动画完成后的回调	(open: boolean) => void	-

注意事项

1. 对话框打开时会阻止页面滚动
2. 按 ESC 键可以关闭对话框（除非设置了 closable={false}）
3. 点击蒙层可以关闭对话框（除非设置了 closeByOverlay={false}）
4. 对话框会在页面 body 上创建 Portal，确保层级高于其他元素