Alert 警告提示

用於頁面中展示重要的提示資訊。

基礎用法

基礎用法

資訊提示

這是一條資訊提示。

成功提示

這是一條成功提示。

警告提示

這是一條警告提示（樸素樣式）。

這是一條危險提示（無標題）。

配合外部狀態

關閉為內部非受控：點關閉即卸載。若要「關掉還能再開啟」，用外部條件渲染包裹。

import { LhAlert } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhAlert type="success" title="成功提示" showIcon closable>
      这是一条成功提示。
    </LhAlert>
  )
}

Alert Props

屬性	說明	型別	可選值	預設值
type	類型	'info' | 'success' | 'warning' | 'danger'	—	'info'
title	標題（不傳時不渲染標題行）	ReactNode	—	—
closable	是否可關閉	boolean	—	false
showIcon	是否顯示類型圖示	boolean	—	false
plain	是否樸素樣式（淺色描邊）	boolean	—	false
closeLabel	關閉按鈕的無障礙名稱（未傳取語言包 alert.close）	string	—	'关闭警告'
sx	快速版面配置屬性	SxProps	—	—

Alert 事件

事件	說明	回呼簽名	Vue 對照
onClose	關閉按鈕點選時觸發	(event: MouseEvent) => void	@close

關閉為內部非受控

點選關閉按鈕後 Alert 直接卸載（無過渡動畫），並觸發 onClose。若要「關掉還能再打開」，用外部狀態做條件渲染包裹，不要依賴元件內部狀態。

無障礙 live region

type 為 warning / danger 時輸出 role="alert"（立即播報）；info / success 輸出 role="status"（排隊播報），避免打斷使用者當前操作。

樣式

import '@lh-ui/react/style/alert'