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'