跳转到内容

Dialog 对话框

对话框将一个任务告知给用户,它承载了一些需要用户进行确认的关键信息或者多个任务。

对话框modal 窗体的一种类型,它通常在应用程序内容之前呈现,来提供一些关键信息,或者要求用户做出决策。 对话框出现的时候会禁用应用程序的所有功能,只有被确认、被取消或已采取其他必要的操作时,对话框会从屏幕中消失。

对话框会带有目的性地打断工作流程,所以请您谨慎使用。

简单的对话框

简单对话框可以提供有关列表的额外信息与操作。 例如,它们可以显示头像,图标,纯文本或具体动作(例如添加帐户)。

触摸操作机制:

  • 选中一个选项则会立刻触发提交选项,并关闭菜单的操作
  • 在对话框外点击,或按下“返回”,将会取消操作并关闭对话框。
Selected: user02@gmail.com

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

警告框

警告框是一种紧急中断的行为,用以通知用户,并需要确认。

大多数警报不需要标题。 删繁就简,总而言之:

  • 问一个问题(例如:“是否删除此对话?”)
  • 陈述一个和动作按钮相关的声明

请仅在高风险情况下使用标题栏警报,考虑到可能丢失连接。 用户应该能够单凭标题和按钮文本来理解所有的选项。

如果需要加上标题请:

  • 使用明确的问题或声明,并在内容区域对其做出解释,例如:“是否要清除 USB 上的内容?”。
  • 避免道歉、模棱两可或问一些问题,例如:“警告!” 或 “你确定吗?”

过渡动画

当然你也可以换掉过渡效果,下面的示例使用了 Slide(幻灯片)

表单对话框

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

自定义对话框

以下是自定义组件的一个示例。 您可以在重写文档页中了解有关此内容的更多信息。

该对话框加上了一个关闭按钮来辅助可用性。

全屏对话框

大小选择项

您可以使用 maxWidth的 enumerable 和 fullWidth的 boolean 来设定对话框的最大宽度。 当 fullWidth 属性为true时,对话框将根据 maxWidth 的值进行自我调整。

响应式全屏

您可以使用useMediaQuery来实现一个全屏显示的对话框。

import useMediaQuery from '@material-ui/core/useMediaQuery';

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

  return <Dialog fullScreen={fullScreen} />
}

确认对话框

确认型对话框明确要求用户在提交选项之前确认他们的选择。 比如说,用户可以听到多种铃声,但只有在点击 “OK” 后才意味着做出了选择。

在确认对话框中触摸 "取消",或按后退,将会导致当前操作的取消,放弃任何更改, 并关闭对话框。

Interruptions
Phone ringtone

Dione

Default notification ringtone

Tethys

可拖动的对话框

您可以通过 react-draggable 来创建一个可拖动的对话框。 您可以将需要导入的 Draggable 组件作为 Dialog 组件的 PaperComponent 来传入。 这样一来,您就可以拖动整个对话框。

长内容滚动

考虑到用户有不同的视图大小,并且使用不同的设备,对话框会变得太长,这样的情况下,对话框是可滚动的。

  • 使用 scroll=paper,对话框的内容能在 paper 元素中滚动。
  • 使用 scroll=body,对话框的内容能在 body 元素中滚动。

请看一下下面的例子,这会帮助您加深理解:

设计局限

参考对话框性能部分

无障碍设计

参考模态框无障碍设计部分