Alert

快訊是臨時通知，提供有關動作或事件的簡潔回饋。

安裝

以上指令僅適用於單獨安裝。如果 @nextui-org/react 已全域安裝，則可跳過此步驟。

匯入

使用方式

顏色

Alert 提供 6 種顏色變體，以傳達不同的含義。

變體

圓角

自訂圖示

預設情況下，Alert 會根據 color 屬性顯示適當的圖示。您可以使用 icon 屬性提供自訂圖示來覆寫此設定。

不含圖示

您可以將 hideIcon 屬性設定為 true 來隱藏圖示。

不含圖示包裝器

您可以將 hideIconWrapper 屬性設定為 true 來隱藏圖示包裝器。

含操作

Alert 支援用於其他操作的 endContent 屬性。

受控可見性

您可以使用 isVisible 和 onVisibleChange 屬性來控制 Alert 的可見性。

自訂樣式

您可以將自訂的 Tailwind CSS 類別傳遞給元件插槽，來自訂警示樣式。

自訂實作

您可以使用 useAlert Hook 來建立您自己的警示元件。

資料屬性

警示在 base 元素上具有以下屬性

• data-visible：當警示可見時
• data-closeable：當警示可關閉時
• data-has-title：當警示具有標題時
• data-has-description：當警示具有描述時

插槽

警示具有以下插槽

• base：主要的警示容器元素
• title：標題元素
• description：描述元素
• mainWrapper：標題和描述內容的包裝器
• closeButton：關閉按鈕元素
• iconWrapper：警示圖示的包裝器
• alertIcon：警示圖示元素

無障礙性

• 警示的角色為 alert
• 關閉按鈕預設具有 aria-label="關閉"
• 關閉時，警示會從 DOM 中移除

API

警示 Props

警示事件