Message 訊息提示

全域浮層的輕量反饋：操作成功 / 失敗、網路狀態等。掛載在單例容器中，多條訊息自上而下堆疊。

基礎用法

基礎用法

import { message } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('保存成功')

message 方法

方法	說明	傳回值
info / success / warning / error / danger	顯示訊息	{ close }
loading	顯示載入訊息（預設不自動關閉）	{ close }
destroyAll	關閉全部訊息並卸載容器	void

傳回的句柄用於主動關閉：

const handle = message.loading('正在上传…', { duration: 0 })
// ...
handle.close()

LhMessageOptions

屬性	說明	型別	預設值
duration	自動關閉毫秒數，0 不自動關閉（loading 語意預設 0）	number	3000
showClose	是否顯示關閉按鈕	boolean	false
offset	距視區頂部偏移 px	number	20
closeLabel	關閉按鈕的 aria-label	string	語言包（zh-CN：关闭提示）
onClose	關閉時回呼	() => void	—
sx	快速版面配置屬性	SxProps	—

與 Vue 版的事件映射

message.success('x') 對應 plus 的 LhMessage.success('x')；句柄的 close() 對應 plus 的 LhMessage.close(id)。React 側用傳回值而非全域 id 管理。

無障礙

成功 / 資訊為 role="status"（排隊播報），錯誤 / 警告為 role="alert"（立即播報）， 與 Alert、Notification 同範式。

樣式

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