Alert

Alert 會顯示簡短的訊息給使用者，而不會中斷他們使用應用程式。

簡介

Alert 以不唐突的方式提供使用者簡短且可能具時效性的資訊。

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 模式的一個主要特徵是，它不應中斷使用者的應用程式體驗。Alert 不應與 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 按鈕)—靠右對齊。

如果您在未設定 action prop 的情況下為 Alert 提供 onClose 回呼，則元件預設會顯示關閉圖示 (✕)。

此 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 具有無障礙功能

由於 alert 不應干擾應用程式的使用，因此您的 Alert 元件絕不應影響鍵盤焦點。
如果 alert 包含操作，則該操作必須具有 tabindex of 0，以便僅使用鍵盤的使用者可以存取。
重要的 alert 不應自動消失—計時互動可能會使需要額外時間來理解或找到 alert 的使用者無法存取您的應用程式。
過於頻繁發生的 alert 會降低應用程式的可用性。
動態呈現的 alert 會由螢幕閱讀器宣告；當頁面載入時已存在的 alert 則不會宣告。
對於需要輔助技術的使用者來說，顏色不會為 UI 增加意義。您必須確保透過顏色傳達的任何資訊也以其他方式表示，例如在 alert 本身的文字中，或使用螢幕閱讀器讀取的其他隱藏文字。

結構

Alert 元件由根 Paper 元件 (呈現為 <div>) 組成，其中包含圖示、訊息和選用的操作

<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 和類別的完整參考。