Notification 通知
Message より重いフィードバック：タイトル / 本文 / タイプアイコンを備え、四隅からポップアップします。内容が比較的長いシステム通知に適しています。
基本的な使い方
基本的な使い方
import { notification } from '@lh-ui/react'
import '@lh-ui/react/style/notification'
notification.success({ title: '保存成功', content: '作品がギャラリーに公開されました。' })
// 文字列の省略記法：タイトル行のみ描画
notification.info('システム通知')
notification メソッド
| メソッド | 説明 | 戻り値 |
|---|---|---|
| info / success / warning / error / danger | 通知を表示 | { close } |
| close | 指定した通知を閉じる（先に退場アニメーションを再生） | void |
| closeAll | 全通知を閉じてコンテナをアンマウント | void |
const handle = notification.warning({ title: 'ストレージ容量不足' })
handle.close()
LhNotificationOptions
| プロパティ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| title | タイトル（未指定時は content を使用） | string | — |
| content | 本文（title と同値の時はタイトル行のみ描画） | string | — |
| duration | 自動的に閉じるまでのミリ秒数。0 で自動閉じしない | number | 4500 |
| position | ポップアップ位置 | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-right' |
| showClose | 閉じるボタンを表示するかどうか | boolean | true |
| closeLabel | 閉じるボタンの aria-label | string | 言語パック（zh-CN：关闭通知） |
| onClick | クリックコールバック（渡すとカードがクリック可能になる） | () => void | — |
| onClose | 閉じた時のコールバック | () => void | — |
| sx | クイックレイアウトプロパティ | SxProps | — |
退場アニメーション
React には transition-group がなく、項目自身が退場を管理します：閉じる時にまず lh-notification-slide-leave-*
（280ms）を再生してからレコードを削除します。FLIP の譲りアニメーションは未実装：キューの増減時に兄弟カードが一瞬で移動し、
積み重ねの間隔はコンテナの flex gap が担います。
アクセシビリティ
warning / danger は role="alert"（即時読み上げ）、info / success は
role="status"（順番待ち読み上げ）です。コンテナは role="region" + aria-live="polite" です。
スタイル
import '@lh-ui/react/style/notification'