Modal 模态框

用于展示重要信息或需要用户确认的操作，会中断用户当前操作流程。

基础用法

import { useState } from 'react'
import { Modal, Button } from '@airo-ui/react'

function Demo() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button variant="primary" onClick={() => setVisible(true)}>
        打开对话框
      </Button>
      <Modal
        visible={visible}
        title="确认操作"
        onClose={() => setVisible(false)}
        onConfirm={() => {
          console.log('已确认')
          setVisible(false)
        }}
      >
        <p>确定要执行此操作吗？</p>
      </Modal>
    </>
  )
}

自定义按钮文本

import { Modal } from '@airo-ui/react'

<Modal
  visible={visible}
  title="删除确认"
  confirmText="删除"
  cancelText="取消"
  onClose={() => setVisible(false)}
  onConfirm={() => {
    // 确认删除
    setVisible(false)
  }}
>
  <p>此操作不可撤销，确定要删除吗？</p>
</Modal>

自定义宽度

import { Modal } from '@airo-ui/react'

<Modal
  visible={visible}
  title="宽对话框"
  width="600px"
  onClose={() => setVisible(false)}
>
  <p>内容区域</p>
</Modal>

点击遮罩关闭

import { Modal } from '@airo-ui/react'

<Modal
  visible={visible}
  title="提示"
  maskClosable
  onClose={() => setVisible(false)}
>
  <p>点击遮罩层可关闭</p>
</Modal>

自定义底部

import { Modal } from '@airo-ui/react'

<Modal
  visible={visible}
  title="自定义底部"
  footer={<button onClick={() => setVisible(false)}>我知道了</button>}
  onClose={() => setVisible(false)}
>
  <p>使用自定义底部内容</p>
</Modal>

API

Props

名称	类型	默认值	说明
visible	boolean	false	是否显示
title	string	—	标题
width	string	—	对话框宽度
closable	boolean	true	是否显示关闭按钮
maskClosable	boolean	false	点击遮罩层是否关闭
destroyOnClose	boolean	false	关闭时是否销毁内容
confirmText	string	'确定'	确认按钮文本
cancelText	string	'取消'	取消按钮文本
confirmLoading	boolean	false	确认按钮加载状态
footer	ReactNode	—	自定义底部内容
children	ReactNode	—	对话框内容
onOpen	() => void	—	打开时触发
onClose	() => void	—	关闭时触发
onConfirm	() => void	—	点击确认时触发
onCancel	() => void	—	点击取消时触发