跳转到内容

Alert 警告提示

一个警告提示组件展示了一段简短且重要的信息,在不影响用户操作的同时能够吸引用户的注意力。

注意: 警告提示不属于 Material Design 指南 中的一部分,但是 MUI 仍然会继续支持该组件。

简单的警告提示

警告提示有四种不同程度的级别,每种都有自己独特的颜色和图标。

<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">This is a warning alert — check it out!</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

描述

您可以使用 AlertTitle 组件在内容之上展示一个格式化的标题。

<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  This is an error alert — <strong>check it out!</strong>
</Alert>
<Alert severity="warning">
  <AlertTitle>Warning</AlertTitle>
  This is a warning alert — <strong>check it out!</strong>
</Alert>
<Alert severity="info">
  <AlertTitle>Info</AlertTitle>
  This is an info alert — <strong>check it out!</strong>
</Alert>
<Alert severity="success">
  <AlertTitle>Success</AlertTitle>
  This is a success alert — <strong>check it out!</strong>
</Alert>

行为

一个警告提示可以附带一个行为,例如一个关闭或撤销按钮。 它在消息之后,提醒结束前被渲染。

如果提供了 onClose 回调且没有设置 action 属性的话,则会呈现一个关闭图标。 这个 action 属性可以用来提供一个可替代的行为,例如使用一个 Button 或者 IconButton。

<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
<Alert
  action={
    <Button color="inherit" size="small">
      UNDO
    </Button>
  }
>
  This is a success alert — check it out!
</Alert>

过渡效果

您也可以使用 过渡组件 ,如使用 Collapse(展开) 来实现提醒出现时的过渡效果。

Icons 图标

使用 icon 属性,您可以在警告提示组件开头添加一个图标。 以此来改变不同程度的默认图标。

通过使用 iconMapping 属性,您可以改变不同程度的默认图标映射。 使用 自定义主题,您可以进行全局的设置。

把图标属性设置为 false 将会移除所有图标。

<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  This is a success alert — check it out!
</Alert>
<Alert
  iconMapping={{
    success: <CheckCircleOutlineIcon fontSize="inherit" />,
  }}
>
  This is a success alert — check it out!
</Alert>
<Alert icon={false} severity="success">
  This is a success alert — check it out!
</Alert>

变体

还有描边(outlined)和填充(filled)这两种组件的变体可以使用。

描边

<Alert variant="outlined" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="outlined" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="outlined" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="outlined" severity="success">
  This is a success alert — check it out!
</Alert>

填充

<Alert variant="filled" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="filled" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="filled" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="filled" severity="success">
  This is a success alert — check it out!
</Alert>

Toast(提示)

你可以使用消息条(Snackbar)来显示一个带警告提示组件的 toast

Color 颜色

使用 color 属性可以覆盖不同程度提醒的默认颜色。

<Alert severity="success" color="info">
  This is a success alert — check it out!
</Alert>

无障碍设计

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert)

当动态地显示组件时,大部分屏幕都会自动朗读其内容。 此时,屏幕阅读不会将页面加载时出现的提醒通知给用户。

使用颜色来增加意义只提供了一个视觉指示,而不会传达给一个辅助用户的技术,如屏幕阅读器。 请确保用颜色表示的信息,或者对于内容本身(例如一些可见的文本)是明显的,或者通过其他方法包含信息,例如一个附加的隐藏文本。

动作的选项卡索引(tab index)必须为 0,这样只使用键盘的用户才能访问它们。