Message 메시지

전역 플로팅 레이어의 가벼운 피드백: 작업 성공 / 실패, 네트워크 상태 등. 싱글톤 컨테이너에 마운트되며, 여러 메시지가 위에서 아래로 쌓입니다.

기본 사용법

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

message.success('저장 성공')

메서드	설명	반환값
info / success / warning / error / danger	메시지 표시	`{ close }`
loading	로딩 메시지 표시 (기본적으로 자동으로 닫히지 않음)	`{ close }`
destroyAll	모든 메시지를 닫고 컨테이너 언마운트	`void`

반환된 핸들로 직접 닫을 수 있습니다:

const handle = message.loading('업로드 중…', { duration: 0 })
// ...
handle.close()

프로퍼티	설명	타입	기본값
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'