element/examples/docs/fr-FR/notification.md
Simon Malesys 958efaefc3 I18n: French translation (#12153)
* Docs: add french translation (fr-FR) in "components.json".

* Docs: add french translation (fr-FR) in "page.json"

* Docs: add french translation (fr-FR) in "route.json"

* Docs: add french translation (fr-FR) in "title.json"

* Docs: remove a comma in "title.json"

* Docs: translate alert.md into french (fr-FR)

* Docs: remove a comma in "component.json"

* Docs: translate badge.md into french (fr-FR)

* * a77b5518 Docs: translate breadcrumb.md into french (fr-FR)

* * a77b5518 Docs: translate breadcrumb.md into french (fr-FR)

* Docs: translate button.md into french (fr-FR)

* Docs: translate card.md into french (fr-FR)

* Docs: translate carousel.md into french (fr-FR)

* Docs: translate cascader.md into french (fr-FR)

* Docs: translate checkbox.md into french (fr-FR)

* Docs: translate collapse.md into french (fr-FR)

* Docs: translate color-picker.md into french (fr-FR)

* Docs: translate color.md into french (fr-FR)

* Docs: translate container.md into french (fr-FR)

* Docs: translate custom-theme.md into french (fr-FR)

* Docs: translate date-picker.md into french (fr-FR)

* Docs: translate datetime-picker.md into french (fr-FR)

* Docs: translate dialog.md into french (fr-FR)

* Docs: translate form.md into french (fr-FR)

* Docs: translate i18n.md into french (fr-FR)

* Docs: translate icon.md into french (fr-FR)

* Docs: translate input-number.md into french (fr-FR)

* Docs: translate input.md into french (fr-FR)

* Docs: translate installation.md into french (fr-FR)

* Docs: translate dropdown.md into french (fr-FR)

* Docs: translate layout.md into french (fr-FR)

* Docs: translate loading.md into french (fr-FR)

* Docs: translate menu.md into french (fr-FR)

* Docs: translate message-box.md into french (fr-FR)

* Docs: translate message.md into french (fr-FR)

* Docs: translate notification.md into french (fr-FR)

* Docs: translate pagination.md into french (fr-FR)

* Docs: translate popover.md into french (fr-FR)

* Docs: translate progress.md into french (fr-FR)

* Docs: translate quickstart.md into french (fr-FR)

* Docs: translate radio.md into french (fr-FR)

* Docs: translate rate.md into french (fr-FR)

* Docs: translate select.md into french (fr-FR)

* Docs: translate slider.md into french (fr-FR)

* Docs: translate steps.md into french (fr-FR)

* Docs: translate switch.md into french (fr-FR)

* Docs: translate table.md into french (fr-FR)

* Docs: translate tabs.md into french (fr-FR)

* Docs: translate tag.md into french (fr-FR)

* Docs: translate time-picker.md into french (fr-FR)

* Docs: translate tooltip.md into french (fr-FR)

* Docs: translate transfer.md into french (fr-FR)

* Docs: translate transition.md into french (fr-FR)

* Docs: translate tree.md into french (fr-FR)

* Docs: translate typography.md into french (fr-FR)

* Docs: translate upload.md into french (fr-FR)

* Docs: update the configuration for the french translation

* Docs: update the french documentation from 2.4.4 to 2.4.11

* Changelog: translate to line 408 into french (fr-FR)

* Changelog: finish the translation into french (fr-FR)

* Changelog: update from 2.4.11 to 2.5.4

* Doc: update french translation from 2.4.11 to 2.5.4

* Changelog: fix a display bug with the subtitles

* Examples: add french language (fr-FR) in search.vue component

* Doc: change some french titles

* Doc: add the french locale to app.vue
2019-02-12 09:08:19 +08:00

10 KiB

Notification

Affiche une notification globale dans un coin de la page.

Usage

:::demo Element enregistre la méthode $notify qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configure les champs title et message. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec duration. Si la durée est mise à 0, la notification ne se fermera pas. duration prends donc un Number in millisecondes.

<template>
  <el-button
    plain
    @click="open">
    Se ferme automatiquement
  </el-button>
  <el-button
    plain
    @click="open2">
    Ne se ferme pas automatiquement
    </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const h = this.$createElement;

        this.$notify({
          title: 'Titre',
          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')
        });
      },

      open2() {
        this.$notify({
          title: 'Prompt',
          message: 'Ceci est un message qui ne se ferme pas',
          duration: 0
        });
      }
    }
  }
</script>

:::

Types

We provide four types: success, warning, info and error.

:::demo Element fournit quatre types de notifications: success, warning, info et error. Il sont choisis grâce au champs type, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes enregistrées pour chaque type, comme dans open5 et open6, qui ne nécessitent donc pas le champs type.

<template>
  <el-button
    plain
    @click="open3">
    Success
  </el-button>
  <el-button
    plain
    @click="open4">
    Warning
  </el-button>
  <el-button
    plain
    @click="open5">
    Info
  </el-button>
  <el-button
    plain
    @click="open6">
    Error
  </el-button>
</template>

<script>
  export default {
    methods: {
      open3() {
        this.$notify({
          title: 'Success',
          message: 'Ceci est un message de succès',
          type: 'success'
        });
      },

      open4() {
        this.$notify({
          title: 'Warning',
          message: 'Ceci est un avertissement',
          type: 'warning'
        });
      },

      open5() {
        this.$notify.info({
          title: 'Info',
          message: 'Ceci est une information'
        });
      },

      open6() {
        this.$notify.error({
          title: 'Error',
          message: 'Ceci est une erreur'
        });
      }
    }
  }
</script>

:::

Position personnalisée

La notification peut apparaître dans le coin de votre choix.

:::demo L'attribut position définit le coin d'apparition de la notification. Cela peut être top-right, top-left, bottom-right ou bottom-left. Le défaut est top-right.

<template>
  <el-button
    plain
    @click="open7">
    Top Right
  </el-button>
  <el-button
    plain
    @click="open8">
    Bottom Right
  </el-button>
  <el-button
    plain
    @click="open9">
    Bottom Left
  </el-button>
  <el-button
    plain
    @click="open10">
    Top Left
  </el-button>
</template>

<script>
  export default {
    methods: {
      open7() {
        this.$notify({
          title: 'Custom Position',
          message: 'Je suis dans le coin supérieur droit'
        });
      },

      open8() {
        this.$notify({
          title: 'Custom Position',
          message: 'Je suis dans le coin inférieur droit',
          position: 'bottom-right'
        });
      },

      open9() {
        this.$notify({
          title: 'Custom Position',
          message: 'Je suis dans le coin inférieur gauche',
          position: 'bottom-left'
        });
      },

      open10() {
        this.$notify({
          title: 'Custom Position',
          message: 'Je suis dans le coin supérieur gauche',
          position: 'top-left'
        });
      }
    }
  }
</script>

:::

Avec décalage

Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.

:::demo Réglez offset pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.

<template>
  <el-button
    plain
    @click="open11">
    Notification avec décalage
  </el-button>
</template>

<script>
  export default {
    methods: {
      open11() {
        this.$notify.success({
          title: 'Success',
          message: 'Ceci est un message de succès',
          offset: 100
        });
      }
    }
  }
</script>

:::

Utiliser du HTML

L'attribut message supporte le HTML.

:::demo Mettez dangerouslyUseHTMLString à true et message sera traité comme du HTML.

<template>
  <el-button
    plain
    @click="open12">
    Utiliser du HTML
  </el-button>
</template>

<script>
  export default {
    methods: {
      open12() {
        this.$notify({
          title: 'HTML String',
          dangerouslyUseHTMLString: true,
          message: '<strong>Ceci est du <i>HTML</i></strong>'
        });
      }
    }
  }
</script>

:::

:::warning Bien que la propriété message supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des attaques XSS. Donc lorsque dangerouslyUseHTMLString est présent, soyez certain de sécuriser le contenu de message, et n'assignez jamais à message du contenu fournit par l'utilisateur. :::

Cacher le bouton de fermeture

Il est possible de cacher le bouton de fermeture.

:::demo Mettez showClose à false Pour que la notification ne puisse pas être fermée par l'utilisateur.

<template>
  <el-button
    plain
    @click="open13">
    Bouton de fermeture caché
    </el-button>
</template>

<script>
  export default {
    methods: {
      open13() {
        this.$notify.success({
          title: 'Info',
          message: 'Ceci est un message sans bouton de fermeture',
          showClose: false
        });
      }
    }
  }
</script>

:::

Méthode globale

Element ajoute la méthode $notify à Vue.prototype. Vous pouvez donc appeler Notification dans l'instance de Vue comme nous avons fait dans cette page.

Import à la demande

Importez Notification:

import { Notification } from 'element-ui';

Dans ce cas vous devrez appeler Notification(options). Il existe aussi des méthodes pour chaque type, e.g. Notification.success(options). Vous pouvez appeler Notification.closeAll() pour fermer manuellement toutes les instances.

Options

Attribut Description Type Valeurs acceptées Défaut
title Titre de la notification. string
message Message de la notification. string/Vue.VNode
dangerouslyUseHTMLString Si message doit être traité comme du HTML. boolean false
type Type de notification. string success/warning/info/error
iconClass Classe d'icône. Écrasé par type. string
customClass Nom de classe pour la notification. string
duration Durée avant fermeture. Infinie si mise à 0. number 4500
position Position de la notification. string top-right/top-left/bottom-right/bottom-left top-right
showClose Si le bouton de fermeture doit être affiché. boolean true
onClose Callback de fermeture. function
onClick Callback quand la notification est cliquée. function
offset Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage. number 0

Méthodes

Notification et this.$notify retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode close.

Méthode Description
close Ferme la notification.