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

變體

SolidSoftOutlinedPlain

裝飾器

使用 startDecorator 和 endDecorator 屬性將動作和圖示附加到 Alert 的任一側

您的訊息已成功發送。

您的帳戶已更新。

反轉色彩

Alert 元件透過使用 invertedColors 屬性，支援 Joy UI 的色彩反轉。

Success

成功是從失敗走向失敗，卻不失熱情。

連線中斷

請確認您的網路連線並重試。

常見範例

各種狀態

Success

這是一個具時效性的SuccessAlert。

Warning

這是一個具時效性的WarningAlert。

錯誤

這是一個具時效性的錯誤Alert。

Neutral

這是一個具時效性的NeutralAlert。

Danger 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