2025-11-21 09:08:22React Dialog（对话框）组件
编辑此页面Dialog 对话框对话框将一个任务告知给用户，它承载了一些需要用户进行确认的关键信息或者多个任务。
对话框是 modal 窗体的一种类型，它通常在应用程序内容之前呈现，来提供一些关键信息，或者要求用户做出决策。 对话框出现的时候会禁用应用程序的所有功能，只有被确认、被取消或已采取其他必要的操作时，对话框会从屏幕中消失。
对话框会带有目的性地打断工作流程，所以请您谨慎使用。
Feedback 用户反馈WAI-ARIA捆绑包的大小Material DesignFigmaAdobeSketch简单的对话框简单对话框可以提供有关列表的额外信息与操作。 例如，它们可以显示头像，图标，纯文本或具体动作(例如添加帐户)。
触摸操作机制：
选中一个选项则会立刻触发提交选项，并关闭菜单的操作
在对话框外点击，或按下“返回”，将会取消操作并关闭对话框。
Selected: user02@gmail.comOpen simple dialog
Selected: {selectedValue}
Open simple dialog
selectedValue={selectedValue} open={open} onClose={handleClose} />警告框警告框是一种紧急中断的行为，用以通知用户，并需要确认。 大多数警报不需要标题。 删繁就简，总而言之： 问一个问题（例如：“是否删除此对话？”） 陈述一个和动作按钮相关的声明 请仅在高风险情况下使用标题栏警报，考虑到可能丢失连接。 用户应该能够单凭标题和按钮文本来理解所有的选项。 如果需要加上标题请: 使用明确的问题或声明，并在内容区域对其做出解释，例如：“是否要清除 USB 上的内容？”。 避免使用道歉、模棱两可的内容或者问题，例如”警告！ “或者”你确定吗？ “ Open alert dialog过渡动画当然你也可以换掉过渡效果，下面的示例使用了 Slide（幻灯片）。 Slide in alert dialog表单对话框表单对话框允许用户在对话框内填写表单。 比如说，如果您的网站提示潜在订阅者填写他们的电子邮件地址，他们可以填写电子邮件字段然后点击“提交”。 Open form dialog自定义对话框以下是自定义组件的一个示例。 您可以在 重写文档页面 中了解更多有关此内容的信息。 该对话框加上了一个关闭按钮来辅助可用性。 Open dialog全屏对话框Open full-screen dialog大小选择项您可以使用 maxWidth的 enumerable 和 fullWidth的 boolean 来设定对话框的最大宽度。 当 fullWidth 属性为 true 时，对话框将根据 maxWidth 的值进行自我调整。 Open max-width dialog响应式全屏您可以使用useMediaQuery来实现一个全屏显示的对话框。 import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down('md')); return ; } Open responsive dialog确认对话框确认型对话框明确要求用户在提交选项之前确认他们的选择。 举个例子，用户可以听到多种铃声，但是只有在点击 “OK” 按钮后才意味着完成了选择。 在确认对话框中点按“取消”或“返回（Back）”键，可取消操作，放弃任何更改，并关闭对话框。 InterruptionsPhone ringtoneDione Default notification ringtoneTethys 可拖动的对话框您可以通过 react-draggable 来创建一个可拖动的对话框。 为此，您可以将需要导入的 Draggable 组件作为 Dialog 组件的 PaperComponent 来传入。 这样一来，您就可以拖动整个对话框。 Open draggable dialog长内容滚动当对话框相对于用户的视口或设备来说太长时，它们就可以滚动。 使用 scroll=paper，对话框的内容能在 paper 元素中滚动。 使用 scroll=body，对话框的内容能在 body 元素中滚动。 请看一下下面的例子，这会帮助您加深理解： scroll=paperscroll=body性能参考对话框性能部分。 设计局限参考对话框性能部分。 无障碍设计参考模态框无障碍设计部分。 API