@ug666/react 文档演示

Modal 对话框

Modal 适合重要确认、表单弹窗和需要打断用户流程的操作。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Modal, ModalContent, ModalHeader, ModalTitle, ModalFooter, ModalCloseButton } from '@ug666/react'

变体预览

基础确认弹窗与更宽的说明弹窗。

状态展示

可用在危险确认、只读说明与复杂表单流程中。

尺寸展示

通过 ModalContent 的 maxWidth 控制弹窗宽度。

max-w-sm 紧凑确认max-w-lg 标准表单max-w-2xl 说明内容

代码示例

推荐配合 Button 与自定义内容组合实现业务确认流。

import { useState } from 'react'
import { Button, Modal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle } from '@ug666/react'

export function DeleteConfirmDialog() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>删除项目</Button>
      <Modal open={open} onClose={() => setOpen(false)}>
        <ModalContent>
          <ModalHeader>
            <ModalTitle>确认删除</ModalTitle>
            <ModalCloseButton onClick={() => setOpen(false)} />
          </ModalHeader>
          <div className="px-6 pb-4 text-sm text-text-secondary">此操作不可撤销，请谨慎确认。</div>
          <ModalFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>取消</Button>
            <Button variant="destructive">确认删除</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

Props 说明

属性	类型	默认值	说明
open	boolean	false	控制对话框显示与隐藏。
onClose	() => void	—	点击遮罩、按下 ESC 或关闭按钮时触发。
className	string	—	自定义遮罩容器样式。
maxWidth	string	'max-w-lg'	ModalContent 的最大宽度类名。