Notification 通知

右上（四隅から選択可能）に表示される通知カードで、少しの提示が必要なフィードバック情報を扱います：タイトル / 本文 / セマンティックアイコン / 閉じるボタン / 自動消滅 / スタッキング。命令的サービス API（LhNotification.success(...)）。

基本的な使い方

vue

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

const showBasic = () => {
  LhNotification.info({ title: '同期完了', content: '3 件の変更がクラウドに同期されました' })
}
</script>

<template>
  <LhButton @click="showBasic">通知を開く</LhButton>
</template>

vue

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

export default {
  methods: {
    showBasic() {
      LhNotification.info({ title: '同期完了', content: '3 件の変更がクラウドに同期されました' })
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">通知を開く</LhButton>
</template>

セマンティックタイプ

vue

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

const showInfo = () => LhNotification.info({ title: 'お知らせ', content: '本文' })
const showSuccess = () => LhNotification.success({ title: '成功', content: 'バックアップが完了しました' })
const showWarning = () => LhNotification.warning({ title: '警告', content: 'ストレージの空き容量が不足しています' })
const showDanger = () => LhNotification.danger({ title: '失敗', content: 'ネットワーク接続が切断されました' })
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">情報</LhButton>
    <LhButton @click="showSuccess">成功</LhButton>
    <LhButton @click="showWarning">警告</LhButton>
    <LhButton @click="showDanger">危険</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showInfo() {
      LhNotification.info({ title: 'お知らせ', content: '本文' })
    },
    showSuccess() {
      LhNotification.success({ title: '成功', content: 'バックアップが完了しました' })
    },
    showWarning() {
      LhNotification.warning({ title: '警告', content: 'ストレージの空き容量が不足しています' })
    },
    showDanger() {
      LhNotification.danger({ title: '失敗', content: 'ネットワーク接続が切断されました' })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">情報</LhButton>
    <LhButton @click="showSuccess">成功</LhButton>
    <LhButton @click="showWarning">警告</LhButton>
    <LhButton @click="showDanger">危険</LhButton>
  </div>
</template>

表示位置

position で四隅を指定できます。

vue

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

const showAt = (position) => {
  LhNotification.info({ title: '位置の例', content: position, duration: 3000, position })
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">右上</LhButton>
    <LhButton @click="showAt('top-left')">左上</LhButton>
    <LhButton @click="showAt('bottom-right')">右下</LhButton>
    <LhButton @click="showAt('bottom-left')">左下</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showAt(position) {
      LhNotification.info({ title: '位置の例', content: position, duration: 3000, position })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">右上</LhButton>
    <LhButton @click="showAt('top-left')">左上</LhButton>
    <LhButton @click="showAt('bottom-right')">右下</LhButton>
    <LhButton @click="showAt('bottom-left')">左下</LhButton>
  </div>
</template>

クリック可能な通知

onClick を渡すとカードがボタンのセマンティクスを持ち、Tab でフォーカスでき、Enter / Space でトリガーできます。

vue

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

const showClickable = () => {
  LhNotification.info({
    title: '新しいバージョンがあります',
    content: 'クリックして更新履歴を確認',
    duration: 0,
    onClick: () => window.open('#', '_blank'),
  })
}
</script>

<template>
  <LhButton @click="showClickable">アクション付き通知</LhButton>
</template>

vue

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

export default {
  methods: {
    showClickable() {
      LhNotification.info({
        title: '新しいバージョンがあります',
        content: 'クリックして更新履歴を確認',
        duration: 0,
        onClick: () => window.open('#', '_blank'),
      })
    },
  },
}
</script>

<template>
  <LhButton @click="showClickable">アクション付き通知</LhButton>
</template>

閉じるボタン

show-close で閉じるボタンの表示を制御し（デフォルトは表示）、close-label でそのアクセシビリティ名をカスタマイズできます。

vue

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

const notifyClosable = () => LhNotification.info({ title: 'お知らせ', content: '手動で閉じることもできます', showClose: true, closeLabel: '確認して閉じる' })
const notifyNoClose = () => LhNotification.info({ title: 'お知らせ', content: '自動的に閉じるのを待つしかありません', showClose: false })
</script>

<template>
  <LhButton @click="notifyClosable">閉じるボタンを表示</LhButton>
  <LhButton @click="notifyNoClose">閉じるボタンなし</LhButton>
</template>

vue

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

export default {
  methods: {
    notifyClosable() {
      LhNotification.info({ title: 'お知らせ', content: '手動で閉じることもできます', showClose: true, closeLabel: '確認して閉じる' })
    },
    notifyNoClose() {
      LhNotification.info({ title: 'お知らせ', content: '自動的に閉じるのを待つしかありません', showClose: false })
    },
  },
}
</script>

<template>
  <LhButton @click="notifyClosable">閉じるボタンを表示</LhButton>
  <LhButton @click="notifyNoClose">閉じるボタンなし</LhButton>
</template>

API

LhNotification Props

プロパティ名	説明	型	デフォルト値
type	セマンティックタイプ	`"success" \| "warning" \| "error" \| "info" \| "danger"`	`'info'`
title	タイトル	`string`	—
content	本文内容	`string`	—
showClose	閉じるボタンを表示するか	`boolean`	`true`
closeLabel	閉じるボタンのアクセシビリティ名（未指定時は言語パック `notification.close` を使用）	`string`	—
onClick	カードクリック時のコールバック（渡すとカードは button のセマンティクスで表示される）	`() => void`	—
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

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

Events

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

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

Options

プロパティ名	説明	型	デフォルト値
title	タイトル	`string`	—
content	本文内容	`string`	—
type	セマンティックタイプ	`'success' \| 'warning' \| 'error' \| 'info' \| 'danger'`	`'info'`
duration	自動的に閉じるまでのミリ秒数。`0` で自動閉じなし	`number`	`4500`
position	表示位置	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
showClose	閉じるボタンを表示するか	`boolean`	`true`
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—
onClick	カードクリック時のコールバック	`() => void`	—
onClose	閉じたあとのコールバック	`() => void`	—

アクセシビリティ

各位置のコンテナは role="region" + aria-live="polite"。新しい通知は穏やかに読み上げられ、フォーカスを奪わない
onClick を渡したカードは role="button" となり、Tab でフォーカス可能、Enter / Space でトリガー
閉じるボタンに aria-label を付与（言語パック notification.close、closeLabel で上書き可能）
スタッキング時の移動は CSS トランジション；アニメーションは prefers-reduced-motion を尊重

型定義

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

LhNotificationOptions

/** サービスオプション */
export interface LhNotificationOptions {
  /** タイトル */
  title: string
  /** 本文内容 */
  content?: string
  /** セマンティックタイプ（デフォルト info） */
  type?: LhNotificationType
  /** 自動的に閉じるまでのミリ秒数。0 で自動閉じなし（デフォルト 4500） */
  duration?: number
  /** 表示位置（デフォルト top-right） */
  position?: LhNotificationPosition
  /** 閉じるボタンを表示するか（デフォルト true） */
  showClose?: boolean
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
  /** カードクリック時のコールバック（渡すとカードはフォーカス可能となり button のセマンティクスで表示される） */
  onClick?: () => void
  /** 閉じた（自動・手動を含む）あとのコールバック */
  onClose?: () => void
}

LhNotificationHandle

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

LhNotificationConfig

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

LhNotificationProps

/** 項目コンポーネント props（サービス内部でレンダリング；宣言的に単体で使うことも可能） */
export interface LhNotificationProps {
  type?: LhNotificationType
  title: string
  content?: string
  showClose?: boolean
  /** 閉じるボタンのアクセシビリティ名（未指定時は言語パック notification.close を使用） */
  closeLabel?: string
  /** 渡すとカードがクリック可能になる */
  onClick?: () => void
  sx?: LhSxProps
}

LhNotificationType _{（@lh-ui/share/core/notification から）}

/** 通知セマンティックタイプ（4 セマンティクス、loading なし） */
export type LhNotificationType =
  (typeof LH_TYPES_CONST)[keyof typeof LH_TYPES_CONST]

LhNotificationRecord _{（@lh-ui/share/core/notification から）}

/** サービスキュー内の 1 件の通知の記録形式 */
export interface LhNotificationRecord {
  id: number
  type: LhNotificationType
  title: string
  content: string
  /** 自動的に閉じるまでのミリ秒数。0 で自動閉じなし */
  duration: number
  position: LhNotificationPosition
  showClose: boolean
  sx?: LhSxProps
  onClick?: () => void
  onClose?: () => void
}

LhNotificationPosition _{（@lh-ui/share/core/notification から）}

/** 通知の表示位置（四隅） */
export type LhNotificationPosition =
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'

定数

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

LH_NOTIFICATION_POSITION_CONST _{（@lh-ui/share/core/notification から）}

/** 位置定数 */
export const LH_NOTIFICATION_POSITION_CONST = {
  'top-right': 'top-right',
  'top-left': 'top-left',
  'bottom-right': 'bottom-right',
  'bottom-left': 'bottom-left',
} as const

LH_NOTIFICATION_DURATION_DEFAULT _{（@lh-ui/share/core/notification から）}

/** デフォルトの自動閉じ時間（メッセージよりも長く留まる） */
export const LH_NOTIFICATION_DURATION_DEFAULT = 4500

LH_NOTIFICATION_GAP_DEFAULT _{（@lh-ui/share/core/notification から）}

/** スタッキング間隔 px */
export const LH_NOTIFICATION_GAP_DEFAULT = 16

Notification 通知 ​

基本的な使い方 ​

セマンティックタイプ ​

表示位置 ​

クリック可能な通知 ​

閉じるボタン ​

API ​

LhNotification Props ​

Events ​

Options ​

アクセシビリティ ​

型定義 ​

定数 ​