Message グローバルメッセージ

グローバルで軽量なフィードバック。操作結果の一度限りの通知によく使われます。命令的サービス API が主体（LhMessage.success(...)）で、キューは独立したコンテナにレンダリングされ、コンポーネントツリーに依存しません。上限を超えると最も古いメッセージが自動的に削除されます。

基本的な使い方

vue

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showBasic = () => {
  LhMessage('これはメッセージ通知です')
}
</script>

<template>
  <LhButton @click="showBasic">メッセージを表示</LhButton>
</template>

vue

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showBasic() {
      LhMessage('これはメッセージ通知です')
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">メッセージを表示</LhButton>
</template>

セマンティックタイプ

4 つのセマンティクス + loading。warning / danger / error は role="alert" で即座に読み上げられ、それ以外は穏やかに読み上げられます。

vue

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showInfo = () => LhMessage.info('お知らせ情報')
const showSuccess = () => LhMessage.success('保存成功')
const showWarning = () => LhMessage.warning('リスクに注意してください')
const showDanger = () => LhMessage.danger('操作に失敗しました')
// loading はデフォルトで自動的に閉じない。返されるハンドルで手動閉じする
const showLoading = () => {
  const handle = LhMessage.loading('同期しています…')
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">情報</LhButton>
    <LhButton @click="showSuccess">成功</LhButton>
    <LhButton @click="showWarning">警告</LhButton>
    <LhButton @click="showDanger">危険</LhButton>
    <LhButton @click="showLoading">読み込み中（手動で閉じる）</LhButton>
  </div>
</template>

vue

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showInfo() {
      LhMessage.info('お知らせ情報')
    },
    showSuccess() {
      LhMessage.success('保存成功')
    },
    showWarning() {
      LhMessage.warning('リスクに注意してください')
    },
    showDanger() {
      LhMessage.danger('操作に失敗しました')
    },
    // loading はデフォルトで自動的に閉じない。返されるハンドルで手動閉じする
    showLoading() {
      const handle = LhMessage.loading('同期しています…')
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">情報</LhButton>
    <LhButton @click="showSuccess">成功</LhButton>
    <LhButton @click="showWarning">警告</LhButton>
    <LhButton @click="showDanger">危険</LhButton>
    <LhButton @click="showLoading">読み込み中（手動で閉じる）</LhButton>
  </div>
</template>

クローズ可能とキュー上限

showClose で閉じるボタンを表示します。キューはデフォルトで最大 5 件（LhMessage.config({ max }) で調整可能）で、超過分は最も古いものから削除されます。

vue

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showClosable = () => LhMessage.success('保存成功', { showClose: true })
// closeLabel は閉じるボタンのアクセシブル名をカスタマイズする
const showCloseLabel = () => LhMessage.info('ご確認ください', { showClose: true, closeLabel: '確認して閉じる' })
</script>

<template>
  <LhButton @click="showClosable">手動で閉じる</LhButton>
  <LhButton @click="showCloseLabel">閉じるテキストをカスタマイズ</LhButton>
</template>

vue

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showClosable() {
      LhMessage.success('保存成功', { showClose: true })
    },
    // closeLabel は閉じるボタンのアクセシブル名をカスタマイズする
    showCloseLabel() {
      LhMessage.info('ご確認ください', { showClose: true, closeLabel: '確認して閉じる' })
    },
  },
}
</script>

<template>
  <LhButton @click="showClosable">手動で閉じる</LhButton>
  <LhButton @click="showCloseLabel">閉じるテキストをカスタマイズ</LhButton>
</template>

グローバル設定

import { LhMessage } from '@lh-ui/vue3'

LhMessage.config({
  duration: 3000, // 自動的に閉じるまでのミリ秒（0 で自動閉じしない）
  max: 5,         // キューの最大同時表示件数
  offset: 20,     // ビューポート上端からのオフセット px
  appendTo: 'body', // マウントコンテナ（セレクターまたは要素）
})

API

LhMessage Props

プロパティ名	説明	型	デフォルト値
content	メッセージの内容	`string`	—
type	セマンティックタイプ	`"success" \| "warning" \| "error" \| "info" \| "danger" \| "loading"`	`'info'`
showClose	閉じるボタンを表示するか	`boolean`	`false`
closeLabel	閉じるボタンのアクセシブル名（未指定時は言語パックの `message.close` を参照）	`string`	—
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

サービスメソッド：LhMessage(options) / LhMessage.success/info/warning/danger/loading(content, options?)。{ close } ハンドルを返します。ほかに LhMessage.close(id)、LhMessage.closeAll()、LhMessage.config(options) があります。

Events

イベント名	説明	コールバック引数
close	項目の閉じるボタンをクリックしたときに発火	—

命令的用法では、閉じる（自動・手動を含む）は Options の onClose コールバックで検知します。

Options

プロパティ名	説明	型	デフォルト値
content	メッセージの内容	`string`	—
type	セマンティックタイプ	`'info' \| 'success' \| 'warning' \| 'danger' \| 'error' \| 'loading'`	`'info'`
duration	自動的に閉じるまでのミリ秒。`0` で自動閉じしない（loading のデフォルトは `0`）	`number`	`3000`
showClose	閉じるボタンを表示するか	`boolean`	`false`
offset	ビューポート上端からのオフセット px	`number`	`20`
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—
onClose	閉じたあとのコールバック	`() => void`	—

アクセシビリティ

コンテナと各項目は live region：info / success / loading は role="status" で穏やかに読み上げられ、warning / danger / error は role="alert" で即座に読み上げられる
非ブロッキング設計：フォーカスを移動させず、キーボード操作の流れを遮らない
閉じるボタンに aria-label が付く（言語パックの message.close。closeLabel で上書き可能）
アニメーションは prefers-reduced-motion を尊重する

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/message/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhMessageOptions

/** サービスオプション：文字列内容 + 表示とコールバック */
export interface LhMessageOptions {
  /** メッセージの内容 */
  content: string
  /** セマンティックタイプ（デフォルト info） */
  type?: LhMessageType
  /** 自動的に閉じるまでのミリ秒。0 で自動閉じしない（loading はデフォルト 0、それ以外はデフォルト 3000） */
  duration?: number
  /** 閉じるボタンを表示するか */
  showClose?: boolean
  /** ビューポート上端からのオフセット px（デフォルト 20） */
  offset?: number
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
  /** 閉じた（自動・手動を含む）あとのコールバック */
  onClose?: () => void
}

LhMessageHandle

/** サービスハンドル */
export interface LhMessageHandle {
  close: () => void
}

LhMessageProps

/** 項目コンポーネントの props（サービス内部でレンダリング。宣言的に単体使用も可能） */
export interface LhMessageProps {
  content: string
  type?: LhMessageType
  showClose?: boolean
  /** 閉じるボタンのアクセシブル名（未指定時は言語パックの message.close を参照） */
  closeLabel?: string
  sx?: LhSxProps
}

LhMessageConfig

/** グローバルデフォルト設定（LhMessage.config） */
export interface LhMessageConfig {
  duration?: number
  max?: number
  offset?: number
  /** マウントコンテナ（デフォルト body） */
  appendTo?: string | HTMLElement
}

LhMessageType _{（@lh-ui/share/core/message から）}

/** メッセージのセマンティックタイプ（4 セマンティクス + loading） */
export type LhMessageType =
  | (typeof LH_MESSAGE_TYPE_CONST)[keyof typeof LH_MESSAGE_TYPE_CONST]

LhMessageRecord _{（@lh-ui/share/core/message から）}

/** サービスキューにおける 1 件のメッセージの記録形式 */
export interface LhMessageRecord {
  id: number
  type: LhMessageType
  content: string
  /** 自動的に閉じるまでのミリ秒。0 で自動閉じしない */
  duration: number
  showClose: boolean
  /** ビューポート上端からのオフセット px */
  offset: number
  sx?: LhSxProps
  onClose?: () => void
}

定数

本コンポーネントで使用される公開定数は以下のとおりです（Props 表の「型 / デフォルト値」列から同名のエントリをクリックするとここへジャンプします）：

LH_MESSAGE_TYPE_CONST _{（@lh-ui/share/core/message から）}

/** 型定数（汎用セマンティック定数に loading を追加） */
export const LH_MESSAGE_TYPE_CONST = {
  ...LH_TYPES_CONST,
  /** @alias 読み込み */
  loading: 'loading',
} as const

LH_MESSAGE_DURATION_DEFAULT _{（@lh-ui/share/core/message から）}

/** デフォルトの自動閉じ時間（loading セマンティクスは自動的に閉じない） */
export const LH_MESSAGE_DURATION_DEFAULT = 3000

LH_MESSAGE_MAX_DEFAULT _{（@lh-ui/share/core/message から）}

/** キューの最大同時表示件数。超過時は最も古いものから削除される */
export const LH_MESSAGE_MAX_DEFAULT = 5

LH_MESSAGE_OFFSET_DEFAULT _{（@lh-ui/share/core/message から）}

/** ビューポート上端からのデフォルトオフセット px */
export const LH_MESSAGE_OFFSET_DEFAULT = 20

Message グローバルメッセージ ​

基本的な使い方 ​

セマンティックタイプ ​

クローズ可能とキュー上限 ​

グローバル設定 ​

API ​

LhMessage Props ​

Events ​

Options ​

アクセシビリティ ​

型定義 ​

定数 ​