Notification 通知

右上隅（四隅に設定可能）に表示されるカード型の通知です。プロセスの節目のような長めのフィードバックに適しています。

通知

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton @click="show('info')">情報</LhButton>
      <LhButton type="primary" @click="show('success')">成功</LhButton>
      <LhButton type="warning" @click="show('warning')">警告</LhButton>
      <LhButton type="danger" @click="show('danger')">危険</LhButton>
      <LhButton @click="showClickable">クリック可能なカード</LhButton>
      <LhButton @click="closeAll">すべて閉じる</LhButton>
    </div>
    <p class="demo-note">LhNotification.success({ title, content })。onClick を渡すとカードがクリック可能になります。</p>
  </div>
</template>

<script>
export default {
  methods: {
    show(type) {
      LhNotification[type]({
        title: type + ' の通知',
        content: '『溪山行旅図』デジタル化プロセスの節目が更新されました。',
        showClose: true,
      })
    },
    showClickable() {
      LhNotification.info({
        title: 'クリックしてみてください',
        content: 'onClick を渡すとカード全体がクリック可能になります。',
        onClick() {
          LhMessage.success('カードがクリックされました')
        },
      })
    },
    closeAll() {
      LhNotification.closeAll()
    },
  },
}
</script>

サービス API

LhNotification.success({ title: '取り込み完了', content: '120 点がアーカイブされました' })
// info / success / warning / danger。第二引数は options
LhNotification.info({ title: 'クリックして', content: '...', onClick: () => {} })
LhNotification.closeAll()

Notification Props

プロパティ	説明	型	デフォルト値
type	タイプ	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	タイトル	string	—
content	本文	string	—
showClose	クローズボタンを表示するかどうか	boolean	false
closeLabel	クローズボタンのアクセシビリティ名（渡さないときは言語パッケージの notification.close を使用）	string	—
onClick	渡すとカードがクリック可能になる	() => void	—
sx	sx によるレイアウト省略記法	—	—

ヒント

通知の表示位置（position：top-right / top-left / bottom-right / bottom-left）は openNotification の options で設定します。デフォルトは右上です。