React 组件

UGModal 对话框

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGModal, UGModalContent, UGModalHeader, UGModalBody, UGModalTitle, UGModalFooter, UGModalCloseButton } from '@ug666/ui-react'

变体预览

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

状态展示

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

尺寸展示

通过 UGModal 的 size 选择稳定的语义尺寸，不需要传入 Tailwind 宽度类。

sm 紧凑确认md 标准表单lg / xl 说明内容

代码示例

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

tsx

import { useState } from 'react'
import { UGButton, UGModal, UGModalBody, UGModalCloseButton, UGModalContent, UGModalFooter, UGModalHeader, UGModalTitle } from '@ug666/ui-react'

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

  return (
    <>
      <UGButton variant="destructive" onClick={() => setOpen(true)}>删除项目</UGButton>
      <UGModal open={open} onClose={() => setOpen(false)}>
        <UGModalContent>
          <UGModalHeader>
            <UGModalTitle>确认删除</UGModalTitle>
            <UGModalCloseButton />
          </UGModalHeader>
          <UGModalBody className="text-sm text-text-secondary">此操作不可撤销，请谨慎确认。</UGModalBody>
          <UGModalFooter>
            <UGButton variant="outline" onClick={() => setOpen(false)}>取消</UGButton>
            <UGButton variant="destructive">确认删除</UGButton>
          </UGModalFooter>
        </UGModalContent>
      </UGModal>
    </>
  )
}

属性

属性	类型	默认值	说明
open	boolean	false	控制对话框显示与隐藏。
onClose	() => void	—	点击遮罩、按下 ESC 或关闭按钮时触发。
size	'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'	'md'	控制对话框的语义宽度和全屏布局。
closeOnOverlay	boolean	true	点击遮罩时是否触发关闭。
closeOnEsc	boolean	true	按下 Escape 时是否触发关闭。
className	string	—	自定义遮罩容器样式。
UGModalBody.className	string	—	正文区域的额外样式类名；默认提供滚动、收缩和语义间距。