## Notification

Affiche une notification globale dans un coin de la page.

### Usage

:::demo Element Plus enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configurer 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` en millisecondes.

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

<script>
  import { h } from 'vue'

  export default {
    methods: {
      open1() {
        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>
<!--
<setup>

  import { defineComponent, h } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open1 = () => {
        ElNotification({
          title: 'Titre',
          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel'),
        });
      };

      const open2 = () => {
        ElNotification({
          title: 'Prompt',
          message: 'Ceci est un message qui ne se ferme pas',
          duration: 0,
        });
      };

      return {
        open1,
        open2,
      };
    },
  });

</setup>
-->
```

:::

### Types

Nous fournissons quatre types: succès, avertissement, information et erreur.

:::demo Element Plus 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 `open3` et `open4`, qui ne nécessitent donc pas le champs `type`.

```html
<template>
  <el-button plain @click="open1"> Success </el-button>
  <el-button plain @click="open2"> Warning </el-button>
  <el-button plain @click="open3"> Info </el-button>
  <el-button plain @click="open4"> Error </el-button>
</template>

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

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

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

      open4() {
        this.$notify.error({
          title: 'Error',
          message: 'Ceci est une erreur',
        })
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open1 = () => {
        ElNotification({
          title: 'Success',
          message: 'Ceci est un message de succès',
          type: 'success',
        });
      };

      const open2 = () => {
        ElNotification({
          title: 'Warning',
          message: 'Ceci est un avertissement',
          type: 'warning',
        });
      };

      const open3 = () => {
        ElNotification({
          title: 'Info',
          message: 'Ceci est une information',
        });
      };

      const open4 = () => {
        ElNotification({
          title: 'Error',
          message: 'Ceci est une erreur',
        });
      };
      return {
        open1,
        open2,
        open3,
        open4,
      };
    },
  });

</setup>
-->
```

:::

### 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`.

```html
<template>
  <el-button plain @click="open1"> Top Right </el-button>
  <el-button plain @click="open2"> Bottom Right </el-button>
  <el-button plain @click="open3"> Bottom Left </el-button>
  <el-button plain @click="open4"> Top Left </el-button>
</template>

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

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

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

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

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open1 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'Je suis dans le coin supérieur droit',
        });
      };

      const open2 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'Je suis dans le coin inférieur droit',
          position: 'bottom-right',
        });
      };

      const open3 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'Je suis dans le coin inférieur gauche',
          position: 'bottom-left',
        });
      };

      const open4 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'Je suis dans le coin supérieur gauche',
          position: 'top-left',
        });
      };
      return {
        open1,
        open2,
        open3,
        open4,
      };
    },
  });

</setup>
-->
```

:::

### 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.

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

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

import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

export default defineComponent({
  setup() {
    
    const open = () => {
      ElNotification.success({
        title: 'Success',
        message: 'Ceci est un message de succès',
        offset: 100,
      });
    };

    return {
      open,
    };
  },
});

</setup>
-->
```

:::

### Utiliser du HTML

L'attribut `message` supporte le HTML.

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

```html
<template>
  <el-button plain @click="open"> Utiliser du HTML </el-button>
</template>

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

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElNotification({
          title: 'HTML String',
          dangerouslyUseHTMLString: true,
          message: '<strong>Ceci est du <i>HTML</i></strong>',
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```

:::

:::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](https://en.wikipedia.org/wiki/Cross-site_scripting). 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.

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

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

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElNotification.success({
          title: 'Info',
          message: 'Ceci est un message sans bouton de fermeture',
          showClose: false,
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```

:::

### Méthode globale

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

### Import à la demande

```javascript
import { ElNotification } from 'element-plus'
```

Dans ce cas vous devrez appeler `ElNotification(options)`. Il existe aussi des méthodes pour chaque type, e.g. `ElNotification.success(options)`. Vous pouvez appeler `ElNotification.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. |