Dialog

对话框用于告知用户有关任务的信息，并且可以包含重要信息、需要用户做出决定或涉及多个任务。

对话框是一种模态窗口，它出现在应用程序内容的前面，以提供重要信息或请求用户做出决定。对话框出现时会禁用所有应用程序功能，并保持在屏幕上，直到被确认、关闭或采取了所需的操作。

对话框是有意设计为具有中断性的，因此应谨慎使用。

简介

对话框是使用一组相关的组件实现的

Dialog：渲染模态框的父组件。
Dialog Title：用于对话框标题的包装器。
Dialog Actions：对话框按钮的可选容器。
Dialog Content：用于显示对话框内容的可选容器。
Dialog Content Text：<DialogContent /> 内文本的包装器。
Slide：可选的 Transition，用于使对话框从屏幕边缘滑动进入。

Selecteduser02@gmail.com

<Typography variant="subtitle1" component="div">
  Selected: {selectedValue}
</Typography>
<br />
<Button variant="outlined" onClick={handleClickOpen}>
  Open simple dialog
</Button>
<SimpleDialog
  selectedValue={selectedValue}
  open={open}
  onClose={handleClose}
/>

<Typography variant="subtitle1" component="div">
  Selected: {selectedValue}
</Typography>
<br />
<Button variant="outlined" onClick={handleClickOpen}>
  Open simple dialog
</Button>
<SimpleDialog
  selectedValue={selectedValue}
  open={open}
  onClose={handleClose}
/>

按 Enter 键开始编辑

基础

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';

警报

警报是紧急中断，需要用户确认，用于告知用户某种情况。

大多数警报不需要标题。它们用一两句话总结一个决定，可以是：

提出问题（例如“删除此对话？”）
做出与操作按钮相关的声明

仅在高风险情况下使用标题栏警报，例如可能失去连接。用户应该仅根据标题和按钮文本就能理解选项。

如果需要标题

使用清晰的问题或陈述，并在内容区域进行解释，例如“擦除 USB 存储？”。
避免道歉、模棱两可或疑问的表达，例如“警告！”或“你确定吗？”

过渡效果

您也可以替换过渡效果，下一个示例使用了 Slide。

表单对话框

表单对话框允许用户在对话框内填写表单字段。例如，如果您的网站提示潜在订阅者填写他们的电子邮件地址，他们可以填写电子邮件字段并点击“提交”。

自定义

这是一个自定义组件的示例。您可以在覆盖文档页面中了解更多相关信息。

对话框添加了一个关闭按钮，以帮助提高易用性。

全屏对话框

可选尺寸

您可以使用 maxWidth 枚举值与 fullWidth 布尔值结合使用来设置对话框的最大宽度。当 fullWidth 属性为 true 时，对话框将根据 maxWidth 值进行调整。

响应式全屏

您可以使用 useMediaQuery 使对话框响应式全屏显示。

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));

  return <Dialog fullScreen={fullScreen} />;
}

确认对话框

确认对话框要求用户在提交选项之前明确确认他们的选择。例如，用户可以收听多个铃声，但只有在点击“确定”后才能做出最终选择。

在确认对话框中点击“取消”会取消操作、放弃任何更改并关闭对话框。

中断

Phone ringtone

Dione

Default notification ringtone

Tethys

对话框也可以是非模态的，这意味着它们不会中断用户在其后的交互。请访问尼尔森·诺曼集团的文章，以获得关于模态与非模态对话框用法的更深入指导。

下面的演示展示了一个持久 cookie 横幅，这是一个常见的非模态对话框用例。

可拖拽对话框

您可以使用 react-draggable 创建一个可拖拽对话框。为此，您可以将导入的 Draggable 组件作为 Dialog 组件的 PaperComponent 传递。这将使整个对话框可拖拽。

滚动长内容

当对话框对于用户的视口或设备来说太长时，它们会滚动。

scroll=paper 对话框的内容在 paper 元素内滚动。
scroll=body 对话框的内容在 body 元素内滚动。

试试下面的演示来了解我们的意思

性能

请遵循模态性能部分。

限制

请遵循模态限制部分。

补充项目

对于更高级的用例，您或许可以利用

material-ui-confirm

npm downloads

程序包 material-ui-confirm 提供了用于确认用户操作的对话框，而无需编写样板代码。

可访问性

请遵循模态可访问性部分。

Experimental APIs - Toolpad

useDialogs

您可以使用 @toolpad/core 中的 useDialogs() API 命令式地创建和操作对话框。这个 Hook 处理：

用于打开和关闭对话框的状态管理
将数据传递给对话框并从对话框接收结果
堆叠多个对话框
主题化、异步版本的 window.alert()、window.confirm() 和 window.prompt()

以下示例演示了其中一些功能

const handleDelete = async () => {
  const id = await dialogs.prompt('Enter the ID to delete', {
    okText: 'Delete',
    cancelText: 'Cancel',
  });

  if (id) {
    const deleteConfirmed = await dialogs.confirm(
      `Are you sure you want to delete "${id}"?`,
    );
    if (deleteConfirmed) {
      try {
        setIsDeleting(true);
        await mockApiDelete(id);
        dialogs.alert('Deleted!');
      } catch (error) {
        const message = error instanceof Error ? error.message : 'Unknown error';
        await dialogs.open(MyCustomDialog, { id, error: message });
      } finally {
        setIsDeleting(false);
      }
    }
  }
};

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。