React 组件

UGModal 对话框

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

导入方式

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

tsx

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

变体预览

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

状态展示

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

尺寸展示

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

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

代码示例

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

tsx

import { useState } from 'react'
import { UGButton, UGModal, 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 onClick={() => setOpen(false)} />
          </UGModalHeader>
          <div className="px-6 pb-4 text-sm text-text-secondary">此操作不可撤销，请谨慎确认。</div>
          <UGModalFooter>
            <UGButton variant="outline" onClick={() => setOpen(false)}>取消</UGButton>
            <UGButton variant="destructive">确认删除</UGButton>
          </UGModalFooter>
        </UGModalContent>
      </UGModal>
    </>
  )
}

Props

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