243 lines
5.2 KiB
Markdown
243 lines
5.2 KiB
Markdown
|
## Alert
|
||
|
|
|
||
|
|
Affiche des messages importants.
|
||
|
|
|
||
|
|
### Usage
|
||
|
|
|
||
|
|
Les Alertes sont des composants non superposés qui ne disparaissent pas automatiquement.
|
||
|
|
|
||
|
|
:::demo Les Alertes peuvent être de 4 types différents, définit par `type`, le type par défaut étant `info`.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-alert
|
||
|
|
title="succès"
|
||
|
|
type="success">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="information"
|
||
|
|
type="info">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="avertissement"
|
||
|
|
type="warning">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="erreur"
|
||
|
|
type="error">
|
||
|
|
</el-alert>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Thème
|
||
|
|
|
||
|
|
Alert fournit deux thèmes différents, `light` et `dark`.
|
||
|
|
|
||
|
|
:::demo Réglez `effect` pour changer le thème, le défaut étant `light`.
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-alert
|
||
|
|
title="succès"
|
||
|
|
type="success"
|
||
|
|
effect="dark">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="info"
|
||
|
|
type="info"
|
||
|
|
effect="dark">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="avertissement"
|
||
|
|
type="warning"
|
||
|
|
effect="dark">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="erreur"
|
||
|
|
type="error"
|
||
|
|
effect="dark">
|
||
|
|
</el-alert>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Bouton personnalisable
|
||
|
|
|
||
|
|
Personnalisez le bouton de fermeture avec du texte ou des symboles.
|
||
|
|
|
||
|
|
:::demo Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut `closable` détermine si le composant peut être fermé ou non. Il accepte un `boolean`, la valeur par défaut étant `true`. Vous pouvez configurer l'attribut `close-text`pour remplacer la croix du bouton de fermeture. Assurez-vous que `close-text` soit une chaîne de caractères. L'évènement `close` se déclenche quand le composant est fermé.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-alert
|
||
|
|
title="alerte non fermable"
|
||
|
|
type="success"
|
||
|
|
:closable="false">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="texte de fermeture personnalisé"
|
||
|
|
type="info"
|
||
|
|
close-text="Gotcha">
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="alerte avec callback"
|
||
|
|
type="warning"
|
||
|
|
@close="hello">
|
||
|
|
</el-alert>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
methods: {
|
||
|
|
hello() {
|
||
|
|
alert('Hello World!');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Avec icône
|
||
|
|
|
||
|
|
Afficher une icône améliore la lisibilité.
|
||
|
|
|
||
|
|
:::demo Ajouter l'attribut `show-icon` affiche une icône correspondant au type de l'alerte.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-alert
|
||
|
|
title="succès"
|
||
|
|
type="success"
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="information"
|
||
|
|
type="info"
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="avertissement"
|
||
|
|
type="warning"
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="erreur"
|
||
|
|
type="error"
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Texte centré
|
||
|
|
|
||
|
|
Utilisez l'attribut `center` pour centrer le texte.
|
||
|
|
|
||
|
|
:::demo
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-alert
|
||
|
|
title="succès"
|
||
|
|
type="success"
|
||
|
|
center
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="information"
|
||
|
|
type="info"
|
||
|
|
center
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="avertissement"
|
||
|
|
type="warning"
|
||
|
|
center
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="erreur"
|
||
|
|
type="error"
|
||
|
|
center
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Description
|
||
|
|
|
||
|
|
Contient un message avec plus d'informations.
|
||
|
|
|
||
|
|
:::demo A coté de l'attribut `title`, vous pouvez ajouter `description` pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-alert
|
||
|
|
title="Titre"
|
||
|
|
type="success"
|
||
|
|
description="Ceci est la description.">
|
||
|
|
</el-alert>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Icône et description
|
||
|
|
|
||
|
|
:::demo Pour finir, voici un exemple utilisant à la fois l'icône et la description.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-alert
|
||
|
|
title="succès"
|
||
|
|
type="success"
|
||
|
|
description="Plus de texte pour décrire."
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="information"
|
||
|
|
type="info"
|
||
|
|
description="Plus de texte pour décrire."
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="avertissement"
|
||
|
|
type="warning"
|
||
|
|
description="Plus de texte pour décrire."
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
<el-alert
|
||
|
|
title="erreur"
|
||
|
|
type="error"
|
||
|
|
description="Plus de texte pour décrire."
|
||
|
|
show-icon>
|
||
|
|
</el-alert>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Attributs
|
||
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
|
|
| title | Titre. | string | — | — |
|
||
|
|
| type | Type du composant. | string | success/warning/info/error | info |
|
||
|
|
| description | Texte de description. Peut aussi être passé via le slot par défaut | string | — | — |
|
||
|
|
| closable | Si peut être fermé ou non. | boolean | — | true |
|
||
|
|
| center | Si le texte doit être centré ou non. | boolean | — | false |
|
||
|
|
| close-text | Texte personnalisé pour le bouton de fermeture. | string | — | — |
|
||
|
|
| show-icon | Si une icône s'affiche ou non. | boolean | — | false |
|
||
|
|
| effect | Détermine le thème. | string | light/dark | light |
|
||
|
|
|
||
|
|
### Slot
|
||
|
|
|
||
|
|
| Nom | Description |
|
||
|
|
|------|--------|
|
||
|
|
| — | la description |
|
||
|
|
| title | Le contenu du titre. |
|
||
|
|
|
||
|
|
### Évènements
|
||
|
|
| Nom | Description | Paramètres |
|
||
|
|
|---------- |-------- |---------- |
|
||
|
|
| close | Se déclenche lorsque l'alerte est fermée. | — |
|