跳转到内容
AsterUI v0.12.76

Modal

用于用户交互和显示信息的对话框遮罩。

导入

Section titled “导入”
import { Modal } from 'asterui'

示例

Section titled “示例”

基础模态框

带打开/关闭功能的简单模态框。

Basic Modal

This is the modal content.

You can put any content here.

 
import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Basic Modal"
      >
        <p>This is the modal content.</p>
        <p>You can put any content here.</p>
      </Modal>
    )
}

export default App

默认页脚

使用 onOk 和 onCancel 属性的内置确定/取消按钮模态框。

Submit Form

Click OK to submit the form or Cancel to close.

 
import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onOk={() => {
          setOpen(false);
          Modal.success({ title: 'Submitted', content: 'Form submitted successfully!' });
        }}
        onCancel={() => setOpen(false)}
        title="Submit Form"
        okText="Submit"
        cancelText="Cancel"
      >
        <p>Click OK to submit the form or Cancel to close.</p>
      </Modal>
    )
}

export default App

自定义页脚

带自定义页脚按钮的模态框。

Confirmation

Are you sure you want to proceed with this action?

 
import { Modal, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  const handleOk = () => {
    setOpen(false);
    Modal.success({ title: 'Success', content: 'Action completed successfully!' });
  };
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Confirmation"
        footer={
          <Space direction="horizontal" size="sm">
            <Button onClick={() => setOpen(false)}>Cancel</Button>
            <Button color="primary" onClick={handleOk}>
              OK
            </Button>
          </Space>
        }
      >
        <p>Are you sure you want to proceed with this action?</p>
      </Modal>
    )
}

export default App

静态方法

使用 Modal.info、Modal.success、Modal.warning 和 Modal.error 的快速对话框。

 
import { Modal, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button onClick={() => Modal.info({ title: 'Info', content: 'This is an informational message.' })}>
          Info
        </Button>
        <Button onClick={() => Modal.success({ title: 'Success', content: 'Operation completed successfully!' })}>
          Success
        </Button>
        <Button onClick={() => Modal.warning({ title: 'Warning', content: 'Please proceed with caution.' })}>
          Warning
        </Button>
        <Button onClick={() => Modal.error({ title: 'Error', content: 'Something went wrong.' })}>
          Error
        </Button>
      </Space>
    )
}

export default App

确认对话框

使用 Modal.confirm 的带确定和取消按钮的确认对话框。

 
import { Modal, Button } from 'asterui'

function App() {
  return (
      <Button
        onClick={() =>
          Modal.confirm({
            title: 'Delete Item',
            content: 'Are you sure you want to delete this item? This action cannot be undone.',
            okText: 'Delete',
            cancelText: 'Cancel',
            onOk: () => Modal.success({ title: 'Deleted', content: 'Item has been deleted.' }),
          })
        }
      >
        Delete Item
      </Button>
    )
}

export default App

居中模态框

垂直居中的模态框。

Centered Modal

This modal is vertically centered on the screen.

 
import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Centered Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Centered Modal"
        centered
      >
        <p>This modal is vertically centered on the screen.</p>
      </Modal>
    )
}

export default App

模态框尺寸

不同的模态框宽度。

Modal Width: 520px

This modal has a width of 520px.

 
import { Modal, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  const [width, setWidth] = useState<number | string>(520);
  
  const showModal = (w: number | string) => {
    setWidth(w);
    setOpen(true);
  };
  
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button onClick={() => showModal(400)}>
          Small (400px)
        </Button>
        <Button onClick={() => showModal(520)}>
          Default (520px)
        </Button>
        <Button onClick={() => showModal(800)}>
          Large (800px)
        </Button>
      </Space>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title={`Modal Width: ${width}px`}
        width={width}
      >
        <p>This modal has a width of {width}px.</p>
      </Modal>
    )
}

export default App

响应式位置

模态框位置可以使用响应式位置对象根据屏幕尺寸改变。

Responsive Modal

This modal appears at the bottom on mobile and centered on larger screens.

Resize your browser to see the effect.

 
import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Responsive Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Responsive Modal"
        position={{ base: 'bottom', sm: 'middle' }}
      >
        <p>This modal appears at the bottom on mobile and centered on larger screens.</p>
        <p className="text-sm text-base-content/70 mt-2">Resize your browser to see the effect.</p>
      </Modal>
    )
}

export default App

API

Section titled “API”
Section titled “Modal”
属性描述类型默认值
open受控的打开状态booleanfalse
title模态框标题React.ReactNode-
children模态框内容React.ReactNode-
footer自定义页脚内容（设置为 null 隐藏）React.ReactNode-
onOk确定按钮点击处理器（显示默认页脚）() => void | Promise<void>-
onCancel取消按钮点击处理器() => void-
onClose关闭处理器（onCancel 的别名）() => void-
okText确定按钮文本string'OK'
cancelText取消按钮文本string'Cancel'
width模态框宽度number | string-
centered垂直居中模态框booleanfalse
position模态框位置（支持响应式对象）'top' | 'middle' | 'bottom' | { base?, sm?, md?, lg?, xl?, '2xl'? }-
align模态框对齐'start' | 'end'-
maskClosable点击背景关闭booleantrue
closable显示关闭背景booleantrue
className额外的 CSS 类名string-

Modal.info/success/warning/error/confirm

Section titled “Modal.info/success/warning/error/confirm”
属性描述类型默认值
title模态框标题React.ReactNode-
content模态框内容React.ReactNode-
onOk确定按钮点击处理器() => void | Promise<void>-
onCancel取消按钮点击处理器（仅限 confirm）() => void-
okText确定按钮文本string'OK'
cancelText取消按钮文本（仅限 confirm）string'Cancel'
type用于样式的模态框类型'info' | 'success' | 'warning' | 'error'-

静态方法

Section titled “静态方法”
  • Modal.info(config) - 信息对话框
  • Modal.success(config) - 成功对话框
  • Modal.warning(config) - 警告对话框
  • Modal.error(config) - 错误对话框
  • Modal.confirm(config) - 带确定/取消的确认对话框

无障碍

Section titled “无障碍”
  • 使用原生 <dialog> 元素以获得正确的模态框行为
  • 打开时焦点被困在模态框内
  • 按 Escape 键关闭模态框
  • 关闭时焦点恢复到触发器元素
  • 为屏幕阅读器使用 aria-labelledby 和 aria-describedby