Alert

Alerts 为用户显示简短消息，而不会中断他们对应用程序的使用。

简介

Alerts 以不显眼的方式为用户提供简短且可能时间敏感的信息。

Material UI Alert 组件包含多个 props，用于快速自定义其样式，以便提供关于其内容的即时视觉提示。

这是一个温和的确认，表明您的操作已成功。

<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  Here is a gentle confirmation that your action was successful.
</Alert>

<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  Here is a gentle confirmation that your action was successful.
</Alert>

按 Enter 键开始编辑

用法

alert 模式的一个关键特性是它不应中断用户对应用程序的体验。Alerts 不应与 alert *对话框* (ARIA) 混淆，后者*旨在*中断用户以获得响应。如果您需要这种行为，请使用 Material UI Dialog 组件。

基础

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

Alert 组件包裹其内容，并拉伸以填充其封闭容器。

严重程度

severity prop 接受四个值，代表不同的状态—success (默认), info, warning, 和 error—每种状态都有相应的图标和颜色组合

这是一个 success Alert。

这是一个 info Alert。

这是一个 warning Alert。

这是一个 error Alert。

<Alert severity="success">This is a success Alert.</Alert>
<Alert severity="info">This is an info Alert.</Alert>
<Alert severity="warning">This is a warning Alert.</Alert>
<Alert severity="error">This is an error Alert.</Alert>

<Alert severity="success">This is a success Alert.</Alert>
<Alert severity="info">This is an info Alert.</Alert>
<Alert severity="warning">This is a warning Alert.</Alert>
<Alert severity="error">This is an error Alert.</Alert>

按 Enter 键开始编辑

变体

Alert 组件带有两个替代样式选项—filled 和 outlined—您可以使用 variant prop 进行设置。

Filled

这是一个 filled success Alert。

这是一个 filled info Alert。

这是一个 filled warning Alert。

这是一个 filled error Alert。

<Alert variant="filled" severity="success">
  This is a filled success Alert.
</Alert>
<Alert variant="filled" severity="info">
  This is a filled info Alert.
</Alert>
<Alert variant="filled" severity="warning">
  This is a filled warning Alert.
</Alert>
<Alert variant="filled" severity="error">
  This is a filled error Alert.
</Alert>

<Alert variant="filled" severity="success">
  This is a filled success Alert.
</Alert>
<Alert variant="filled" severity="info">
  This is a filled info Alert.
</Alert>
<Alert variant="filled" severity="warning">
  This is a filled warning Alert.
</Alert>
<Alert variant="filled" severity="error">
  This is a filled error Alert.
</Alert>

按 Enter 键开始编辑

Outlined

这是一个 outlined success Alert。

这是一个 outlined info Alert。

这是一个 outlined warning Alert。

这是一个 outlined error Alert。

<Alert variant="outlined" severity="success">
  This is an outlined success Alert.
</Alert>
<Alert variant="outlined" severity="info">
  This is an outlined info Alert.
</Alert>
<Alert variant="outlined" severity="warning">
  This is an outlined warning Alert.
</Alert>
<Alert variant="outlined" severity="error">
  This is an outlined error Alert.
</Alert>

<Alert variant="outlined" severity="success">
  This is an outlined success Alert.
</Alert>
<Alert variant="outlined" severity="info">
  This is an outlined info Alert.
</Alert>
<Alert variant="outlined" severity="warning">
  This is an outlined warning Alert.
</Alert>
<Alert variant="outlined" severity="error">
  This is an outlined error Alert.
</Alert>

按 Enter 键开始编辑

当将 outlined Alert 与 Snackbar 组件一起使用时，默认情况下，背景内容将可见并透过 Alert。您可以通过将 bgcolor: 'background.paper' 添加到 Alert 组件的 sx prop 来防止这种情况

<Alert sx={{ bgcolor: 'background.paper' }} />

查看 Snackbar—自定义文档，了解如何一起使用这两个组件的示例。

颜色

使用 color prop 来覆盖指定 severity 的默认颜色—例如，将 warning 颜色应用于 success Alert

这是一个带有 warning 颜色的 success Alert。

<Alert severity="success" color="warning">
  This is a success Alert with warning colors.
</Alert>

<Alert severity="success" color="warning">
  This is a success Alert with warning colors.
</Alert>

按 Enter 键开始编辑

操作

使用 action prop 向您的 Alert 添加操作。这允许您在 Alert 的消息之后插入任何元素—HTML 标签、SVG 图标或 React 组件（例如 Material UI Button）—向右对齐。

如果您为 Alert 提供 onClose 回调而未设置 action prop，则该组件将默认显示一个关闭图标 (✕)。

此 Alert 显示默认的关闭图标。

此 Alert 使用 Button 组件作为其操作。

<Alert severity="warning" onClose={() => {}}>
  This Alert displays the default close icon.
</Alert>
<Alert
  severity="success"
  action={
    <Button color="inherit" size="small">
      UNDO
    </Button>
  }
>
  This Alert uses a Button component for its action.
</Alert>

<Alert severity="warning" onClose={() => {}}>
  This Alert displays the default close icon.
</Alert>
<Alert
  severity="success"
  action={
    <Button color="inherit" size="small">
      UNDO
    </Button>
  }
>
  This Alert uses a Button component for its action.
</Alert>

按 Enter 键开始编辑

图标

使用 icon prop 覆盖 Alert 的图标。与 action prop 一样，您的 icon 可以是 HTML 元素、SVG 图标或 React 组件。将此 prop 设置为 false 以完全移除图标。

如果您需要覆盖给定 severity 的图标的所有实例，则可以使用 iconMapping prop 代替。您可以通过自定义应用程序的主题来全局定义此 prop。有关详细信息，请参阅主题组件—默认 props。

这个 success Alert 有一个自定义图标。

这个 success Alert 没有图标。

这个 success Alert 使用 `iconMapping` 来覆盖默认图标。

<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  This success Alert has a custom icon.
</Alert>
<Alert icon={false} severity="success">
  This success Alert has no icon.
</Alert>
<Alert
  iconMapping={{
    success: <CheckCircleOutlineIcon fontSize="inherit" />,
  }}
>
  This success Alert uses `iconMapping` to override the default icon.
</Alert>

<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  This success Alert has a custom icon.
</Alert>
<Alert icon={false} severity="success">
  This success Alert has no icon.
</Alert>
<Alert
  iconMapping={{
    success: <CheckCircleOutlineIcon fontSize="inherit" />,
  }}
>
  This success Alert uses `iconMapping` to override the default icon.
</Alert>

按 Enter 键开始编辑

自定义

标题

要向 Alert 添加标题，请导入 Alert Title 组件

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

您可以将此组件嵌套在 Alert 中的消息上方，以获得整洁的样式和正确对齐的标题，如下所示

成功

这是一个带有鼓励性标题的 success Alert。

信息

这是一个带有信息性标题的 info Alert。

警告

这是一个带有谨慎标题的 warning Alert。

错误

这是一个带有可怕标题的 error Alert。

<Alert severity="success">
  <AlertTitle>Success</AlertTitle>
  This is a success Alert with an encouraging title.
</Alert>
<Alert severity="info">
  <AlertTitle>Info</AlertTitle>
  This is an info Alert with an informative title.
</Alert>
<Alert severity="warning">
  <AlertTitle>Warning</AlertTitle>
  This is a warning Alert with a cautious title.
</Alert>
<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  This is an error Alert with a scary title.
</Alert>

<Alert severity="success">
  <AlertTitle>Success</AlertTitle>
  This is a success Alert with an encouraging title.
</Alert>
<Alert severity="info">
  <AlertTitle>Info</AlertTitle>
  This is an info Alert with an informative title.
</Alert>
<Alert severity="warning">
  <AlertTitle>Warning</AlertTitle>
  This is a warning Alert with a cautious title.
</Alert>
<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  This is an error Alert with a scary title.
</Alert>

按 Enter 键开始编辑

过渡效果

您可以使用 Transition 组件，如 Collapse，为 Alert 的进入和退出添加动画效果。

单击关闭图标以查看 Collapse 过渡效果的实际效果！

无障碍性

以下是一些确保您的 Alert 具有无障碍性需要考虑的因素

由于 alerts 不打算干扰应用程序的使用，因此您的 Alert 组件*绝不*应影响键盘焦点。
如果 alert 包含操作，则该操作必须具有 tabindex 为 0，以便仅使用键盘的用户可以访问它。
重要的 alerts 不应自动消失—定时交互可能会使需要额外时间来理解或定位 alert 的用户无法访问您的应用程序。
过于频繁发生的 alerts 可能会降低应用程序的可用性。
动态渲染的 alerts 会被屏幕阅读器宣布；页面加载时已存在的 alerts *不会*被宣布。
对于需要辅助技术的用户，颜色不会为 UI 增加意义。您必须确保通过颜色传达的任何信息也以其他方式表示，例如在 alert 本身的文本中，或使用屏幕阅读器读取的其他隐藏文本。

解剖结构

Alert 组件由根 Paper 组件（渲染为 <div>）组成，该组件容纳一个图标、一条消息和一个可选的 action

<div class="MuiPaper-root MuiAlert-root" role="alert">
  <div class="MuiAlert-icon">
    <!-- svg icon here -->
  </div>
  <div class="MuiAlert-message">This is how an Alert renders in the DOM.</div>
  <div class="MuiAlert-action">
    <!-- optional action element here -->
  </div>
</div>

API

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