Alert

Alerts 组件显示简短的消息给用户，而不会中断他们对应用的使用。

简介

Alert 组件可以用于以不干扰用户任务的方式提供重要且可能时间敏感的信息。（来源：ARIA APG。）

基础用法

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

Alert 组件会包裹其内容，并拉伸以填充其封闭容器，如下所示

这是一个基础 Alert。

<Alert>This is a basic Alert.</Alert>

<Alert>This is a basic Alert.</Alert>

按下 Enter 开始编辑

自定义

变体

Alert 组件支持 Joy UI 的四种全局变体：solid、soft（默认）、outlined 和 plain。

这是一个使用 solid 变体的 Alert。

这是一个使用 soft 变体的 Alert。

这是一个使用 outlined 变体的 Alert。

这是一个使用 plain 变体的 Alert。

<Alert variant="solid">This is an Alert using the solid variant.</Alert>
<Alert variant="soft">This is an Alert using the soft variant.</Alert>
<Alert variant="outlined">This is an Alert using the outlined variant.</Alert>
<Alert variant="plain">This is an Alert using the plain variant.</Alert>

<Alert variant="solid">This is an Alert using the solid variant.</Alert>
<Alert variant="soft">This is an Alert using the soft variant.</Alert>
<Alert variant="outlined">This is an Alert using the outlined variant.</Alert>
<Alert variant="plain">This is an Alert using the plain variant.</Alert>

按下 Enter 开始编辑

尺寸

Alert 组件有三种尺寸：sm、md（默认）和 lg

这是一个小型 Alert。

这是一个中型 Alert。

这是一个大型 Alert。

<Alert size="sm">This is a small Alert.</Alert>
<Alert size="md">This is a medium Alert.</Alert>
<Alert size="lg">This is a large Alert.</Alert>

<Alert size="sm">This is a small Alert.</Alert>
<Alert size="md">This is a medium Alert.</Alert>
<Alert size="lg">This is a large Alert.</Alert>

按下 Enter 开始编辑

颜色

主题中包含的每个调色板都可通过 color 属性使用。下面的演示展示了 color 属性的值如何受全局变体的影响

Primary

Neutral

Danger

Success

Warning

Variant

SolidSoftOutlinedPlain

装饰器

使用 startDecorator 和 endDecorator 属性将操作和图标附加到 Alert 的任一侧

您的消息已成功发送。

您的账户已更新。

反转颜色

Alert 组件通过使用 invertedColors 属性支持 Joy UI 的颜色反转。

Success

成功就是不断犯错，而热情不减。

连接丢失

请验证您的网络连接并重试。

常用示例

各种状态

Success

这是一个时间敏感的SuccessAlert。

Warning

这是一个时间敏感的WarningAlert。

错误

这是一个时间敏感的错误Alert。

Neutral

这是一个时间敏感的NeutralAlert。

危险 alerts

此文件已成功删除

可访问性

以下是一些确保您的 Alert 组件可访问的因素

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

解剖结构

Alert 组件由一个根 <div> 元素组成，其 role 设置为 alert

<div role="alert" class="MuiAlert-root">
  <!-- Alert contents -->
</div>

API

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

<Alert />

Alert

Playground