Notification

Notification sous forme de carte, affichée dans le coin supérieur droit (les quatre coins sont paramétrables), adaptée aux retours longs de type étapes de flux.

Notification

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton @click="show('info')">Information</LhButton>
      <LhButton type="primary" @click="show('success')">Succès</LhButton>
      <LhButton type="warning" @click="show('warning')">Avertissement</LhButton>
      <LhButton type="danger" @click="show('danger')">Danger</LhButton>
      <LhButton @click="showClickable">Carte cliquable</LhButton>
      <LhButton @click="closeAll">Tout fermer</LhButton>
    </div>
    <p class="demo-note">LhNotification.success({ title, content }) ; la carte devient cliquable lorsque onClick est fourni.</p>
  </div>
</template>

<script>
export default {
  methods: {
    show(type) {
      LhNotification[type]({
        title: type + ' : notification',
        content: '*Voyageurs parmi les montagnes et les rivières* : une étape du flux de numérisation a été mise à jour.',
        showClose: true,
      })
    },
    showClickable() {
      LhNotification.info({
        title: 'Cliquez pour essayer',
        content: "Lorsqu'onClick est fourni, toute la carte devient cliquable.",
        onClick() {
          LhMessage.success('La carte a été cliquée')
        },
      })
    },
    closeAll() {
      LhNotification.closeAll()
    },
  },
}
</script>

API de service

LhNotification.success({ title: 'Numérisation terminée', content: '120 œuvres archivées' })
// info / success / warning / danger ; le deuxième argument correspond aux options
LhNotification.info({ title: 'Cliquez ici', content: '...', onClick: () => {} })
LhNotification.closeAll()

Notification Props

Propriété	Description	Type	Valeur par défaut
type	Type	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	Titre	string	—
content	Corps du texte	string	—
showClose	Affiche le bouton de fermeture	boolean	false
closeLabel	Nom accessible du bouton de fermeture (pack de langue notification.close si non transmis)	string	—
onClick	Rend la carte cliquable	() => void	—
sx	Raccourci de mise en page sx	—	—

Astuce

La position d'affichage (position : top-right / top-left / bottom-right / bottom-left) se configure dans les options de openNotification ; par défaut : coin supérieur droit.