Ivan/element-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
Ivan
2021-06-07 11:56:04 +08:00
commit c3c9fee2fb
1071 changed files with 195655 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
examples/docs/fr-FR/alert.md Normal file
View File

@@ -0,0 +1,242 @@
## 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. | — |

146
examples/docs/fr-FR/avatar.md Normal file
View File

@@ -0,0 +1,146 @@
## Avatar avatar
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
Les avatars peuvent être utilisés pour représenter des personnes ou des objets. Les images, icônes et les caractères sont supportés.
### Basic
utilisez les prop `shape` et` size` pour définir la forme et la taille de l'avatar
:::demo
```html
<template>
<el-row class="demo-avatar demo-basic">
<el-col :span="12">
<div class="sub-title">cercle</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar :size="size" :src="circleUrl"></el-avatar>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="sub-title">carré</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
export default {
data () {
return {
circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
sizeList: ["large", "medium", "small"]
}
}
}
</script>
```
:::
### Types
Les images, icônes et les caractères sont supportés.
:::demo
```html
<template>
<div class="demo-type">
<div>
<el-avatar icon="el-icon-user-solid"></el-avatar>
</div>
<div>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div>
<el-avatar> user </el-avatar>
</div>
</div>
</template>
```
:::
### fallback en cas d'erreur de chargement d'image
fallback en cas d'erreur de chargement d'image
:::demo
```html
<template>
<div class="demo-type">
<el-avatar :size="60" src="https://empty" @error="errorHandler">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
</el-avatar>
</div>
</template>
<script>
export default {
methods: {
errorHandler() {
return true
}
}
}
</script>
```
:::
### Comment l'image s'adapte à son conteneur
Défini comment l'image s'adapte à son conteneur, pareil que [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
:::demo
```html
<template>
<div class="demo-fit">
<div class="block" v-for="fit in fits" :key="fit">
<span class="title">{{ fit }}</span>
<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
}
}
</script>
```
:::
### Attributes
| Attribute | Description | Type | Valeurs acceptées | Default |
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
| icon | Défini le type de représentation sur Icon, plus d’informations sur le composant Icon | string | | |
| size | Défini la taille de l'avatar | number/string | number / large / medium / small | large |
| shape | Défini la forme de l'avatar | string | circle / square | circle |
| src | L'adresse de l'image pour un avatar image | string | | |
| srcSet | Une liste d'un ou plusieurs string séparés par des virgules indiquant un ensemble de sources d'images possibles que le user agent peut utiliser | string | | |
| alt | Cet attribut définit une description textuelle alternative de l'image | string | | |
| fit | Défini comment l'image s'adapte à son conteneur | string | fill / contain / cover / none / scale-down | cover |
### Évènements
| Event Name | Description | Paramètres |
| ------ | ------------------ | -------- |
| error | handler en cas d'erreur de chargement de l'image, renvoie false pour éviter le fallback par défaut |(e: Event) |
### Slot
| Slot Name | Description |
| default | personnalise le contenu de l'avatar |

60
examples/docs/fr-FR/backtop.md Normal file
View File

@@ -0,0 +1,60 @@
## Backtop
Un bouton pour revenir en haut de la page
### Basic usage
Scrollez en bas de la page pour voir le bouton en bas à droite.
:::demo
```html
<template>
Scrollez en bas de la page pour voir le bouton en bas à droite.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
```
:::
### Customizations
La zone d'affichage est de 40px \* 40px.
:::demo
```html
<template>
Scrollez en bas de la page pour voir le bouton en bas à droite.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</template>
```
:::
### Attributes
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | La cible pour déclencher le scroll | string | | |
| visibility-height | Le bouton ne s'affichera pas tant que la hauteur de défilement n'aura pas atteint cette valeur. | number | | 200 |
| right | La distance du bord droit | number | | 40 |
| bottom | La distance du bord gauche | number | | 40 |
### Events
| Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- |
| click | Se déclenche quand l'utilisateur clique | click event |

125
examples/docs/fr-FR/badge.md Normal file
View File

@@ -0,0 +1,125 @@
## Badge
Un nombre ou un status affiché par-dessus un bouton ou un icône.
### Usage
Affiche le nombre de nouveaux messages.
:::demo La quantité est définit par `value` qui accepte un `Number` ou un `String`.
```html
<el-badge :value="12" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">Réponses</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix">
Commentaires
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
Réponses
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### Valeur maximale
Vous pouvez configurer la valeur maximale.
:::demo La valeur maximale est définit par `max` qui accepte un `Number`. Ceci ne marche qui si `value` est également un `Number`.
```html
<el-badge :value="200" :max="99" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### Configuration
Affiche du texte autre que des nombres.
:::demo Quand `value` est un `String`, il affiche un texte personnalisé.
```html
<el-badge value="new" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### Point rouge
Utilisez un point rouge pour signaler du contenu devant être remarqué.
:::demo Utilisez l'attribut `is-dot` qui est un `Boolean`.
```html
<el-badge is-dot class="item">Requète</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | Valeur affichée. | string, number | — | — |
| max | Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si `value` est un `Number`. | number | — | — |
| is-dot | Affiche un point rouge. | boolean | — | false |
| hidden | Cache le badge. | boolean | — | false |
| type | Type du bouton. | string | primary / success / warning / danger / info | — |

135
examples/docs/fr-FR/border.md Normal file
View File

@@ -0,0 +1,135 @@
<script>
import bus from '../../bus';
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
const varMap = {
'$--box-shadow-light': 'boxShadowLight',
'$--box-shadow-base': 'boxShadowBase',
'$--border-radius-base': 'borderRadiusBase',
'$--border-radius-small': 'borderRadiusSmall'
};
const original = {
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
borderRadiusBase: '4px',
borderRadiusSmall: '2px'
}
export default {
created() {
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
boxShadowLight: '',
boxShadowBase: '',
borderRadiusBase: '',
borderRadiusSmall: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(varMap).forEach((c) => {
if (value[c]) {
this[varMap[c]] = value[c]
} else {
this[varMap[c]] = original[varMap[c]]
}
});
}
}
}
}
</script>
## Bordure
Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.
### Bordure
Il y a plusieurs styles de bordure que vous pouvez choisir.
<table class="demo-border">
<tbody>
<tr>
<td class="text">Nom</td>
<td class="text">Épaisseur</td>
<td class="line">Demo</td>
</tr>
<tr>
<td class="text">Solid</td>
<td class="text">1px</td>
<td class="line">
<div></div>
</td>
</tr>
<tr>
<td class="text">Dashed</td>
<td class="text">2px</td>
<td class="line">
<div class="dashed"></div>
</td>
</tr>
</tbody>
</table>
### Radius
Il y a plusieurs styles de radius que vous pouvez choisir.
<el-row :gutter="12" class="demo-radius">
<el-col :span="6" :xs="{span: 12}">
<div class="title">Pas de radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Petit radius</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusSmall }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Grand radius</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusBase }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Radius rond</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>
</el-col>
</el-row>
### Ombres
Il y a plusieurs styles d'ombres que vous pouvez choisir.
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowBase }"
></div>
<span class="demo-shadow-text">Ombre de base, box-shadow: {{boxShadowBase}}</span>
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowLight }"
></div>
<span class="demo-shadow-text">Ombre légère, box-shadow: {{boxShadowLight}}</span>

44
examples/docs/fr-FR/breadcrumb.md Normal file
View File

@@ -0,0 +1,44 @@
## Breadcrumb
Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.
### Usage
:::demo Dans `el-breadcrumb`, chaque `el-breadcrumb-item` est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type `String` appelé `separator` qui détermine le séparateur. Sa valeur par défaut est '/'.
```html
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">Accueil</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">Gestion promotions</a></el-breadcrumb-item>
<el-breadcrumb-item>Liste promotions</el-breadcrumb-item>
<el-breadcrumb-item>Détail promotion</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Icône de séparation
:::demo Configurez `separator-class` pour utiliser `iconfont` en tant que séparateur. Cela remplacera `separator`.
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">Accueil</el-breadcrumb-item>
<el-breadcrumb-item>Gestion promotions</el-breadcrumb-item>
<el-breadcrumb-item>Liste promotions</el-breadcrumb-item>
<el-breadcrumb-item>Détail promotion</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Attributs de Breadcrumb
| Attributs | Description | Type | Valeurs acceptées | Défaut|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | Caractère de séparation | string | — | / |
| separator-class | Classe de l'icône de séparation | string | — | - |
### Attributs de Breadcrumb Item
| Attributs | Description | Type | Valeurs acceptées | Défaut|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| to | Route cible du lien, identique au `to` de `vue-router`. | string/object | — | — |
| replace | Si `true`, la navigation ne laissera pas d'historique. | boolean | — | false |

165
examples/docs/fr-FR/button.md Normal file
View File

@@ -0,0 +1,165 @@
## Bouton
Bouton communément utilisé.
### Usage
:::demo Utilisez `type`, `plain`, `round` et `circle` pour définir le style du bouton.
```html
<el-row>
<el-button>Défaut</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
<el-row>
<el-button plain>Plein</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</el-row>
<el-row>
<el-button round>Arrondi</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
```
:::
### Bouton désactivé
L'attribut `disabled` détermine si le bouton est désactivé.
:::demo Utilisez l'attribut `disabled` pour déterminer si un bouton est désactivé ou non. Il accepte un `Boolean`.
```html
<el-row>
<el-button disabled>Défaut</el-button>
<el-button type="primary" disabled>Principal</el-button>
<el-button type="success" disabled>Succès</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Attention</el-button>
<el-button type="danger" disabled>Danger</el-button>
</el-row>
<el-row>
<el-button plain disabled>Plein</el-button>
<el-button type="primary" plain disabled>Principal</el-button>
<el-button type="success" plain disabled>Succès</el-button>
<el-button type="info" plain disabled>Info</el-button>
<el-button type="warning" plain disabled>Attention</el-button>
<el-button type="danger" plain disabled>Danger</el-button>
</el-row>
```
:::
### Bouton texte
Bouton sans bordure ni fond.
:::demo
```html
<el-button type="text">Bouton texte</el-button>
<el-button type="text" disabled>Bouton texte</el-button>
```
:::
### Icône
Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser avec du texte.
:::demo Utilisez l'attribut `icon` pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise `<i>`. Des icônes personnalisées peuvent également être utilisées.
```html
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Recherche</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
```
:::
### Groupes de boutons
Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires.
:::demo Utilisez la balise `<el-button-group>` pour grouper vos boutons.
```html
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Page précédente</el-button>
<el-button type="primary">Page suivante<i class="el-icon-arrow-right el-icon-right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
```
:::
### Bouton en chargement
Cliquez sur le bouton pour charger des données et il affichera un état de chargement.
:::demo Configurez l'attribut `loading` à `true` pour afficher un état de chargement.
```html
<el-button type="primary" :loading="true">Chargement</el-button>
```
:::
### Tailles
En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.
:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`.
```html
<el-row>
<el-button>Défaut</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
</el-row>
<el-row>
<el-button round>Défaut</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
</el-row>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| size | Taille du bouton. | string | medium / small / mini | — |
| type | Type du bouton. | string | primary / success / warning / danger / info / text | — |
| plain | Détermine si le bouton est plein. | boolean | — | false |
| round | Détermine si le bouton est arrondi. | boolean | — | false |
| circle | Détermine si le bouton est un cercle. | boolean | — | false |
| loading | Détermine si l'état de chargement est affiché. | boolean | — | false |
| disabled | Désactive le bouton | boolean | — | false |
| icon | Classe de l'icône. | string | — | — |
| autofocus | Identique à l'attribut natif `autofocus` | boolean | — | false |
| native-type | Identique à l'attribut natif `type` | string | button / submit / reset | button |

68
examples/docs/fr-FR/calendar.md Normal file
View File

@@ -0,0 +1,68 @@
## Calendrier
Affiche un calendrier.
### Usage basique
:::demo Réglez `value` pour spécifier le mois à afficher. Si `value` n'est pas spécifiée, le mois actuel sera affiché. `value` supporte le two-way binding.
```html
<el-calendar v-model="value">
</el-calendar>
<script>
export default {
data() {
return {
value: new Date()
}
}
}
</script>
```
:::
### Contenu personnalisé
:::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.
```html
<el-calendar>
<!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p>
</template>
</el-calendar>
<style>
.is-selected {
color: #1989FA;
}
</style>
```
:::
### Intervalle
:::demo Utilisez l'attribut `range` pour afficher un intervalle particulier. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois.
```html
<el-calendar :range="['2019-03-04', '2019-03-24']">
</el-calendar>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|------------------ |-------------- |---------- |---------------------- |--------- |
| value / v-model | Valeur liée. | Date/string/number | — | — |
| range | Intervalle de dates, début et fin inclus. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | Array | — | — |
| first-day-of-week | fisrt day of week| Number | 1 to 7 | 1 |
### Slot dateCell
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|-----------------|-------------- |---------- |---------------------- |--------- |
| date | Date de la cellule courante. | Date | — | — |
| data | { type, isSelected, day }. `type` indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; `isSelected` indique si la date est sélectionnée; `day` est la date formattée en yyyy-MM-dd. | Object | — | — |

170
examples/docs/fr-FR/card.md Normal file
View File

@@ -0,0 +1,170 @@
## Card
Conteneur intégrant des informations.
### Usage
Le composant Card comprend un titre, un contenu et des opérations.
:::demo Card est composé d'un `header` et d'un `body`. `header` est optionnel et son contenu nécessite l'utilisation d'un slot.
```html
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Bouton</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>
```
:::
### Card simple
Le header peut être omis.
:::demo
```html
<el-card class="box-card">
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
padding: 18px 0;
}
.box-card {
width: 480px;
}
</style>
```
:::
### Images
Affichez un contenu plus riche grâce à la configuration.
:::demo L'attribut `body-style` définit le style CSS du `body`. Cet exemple utilise aussi `el-col` pour la mise en page.
```html
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<style>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>
export default {
data() {
return {
currentDate: new Date()
};
}
}
</script>
```
:::
### Ombres
Vous pouvez définir quand l'ombre des Cards doivent apparaître.
:::demo L'attribut `shadow` détermine quand l'ombre doit apparaître. Les valeurs possibles sont `always`, `hover` ou `never`.
```html
<el-row :gutter="12">
<el-col :span="8">
<el-card shadow="always">
Always
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">
Hover
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">
Never
</el-card>
</el-col>
</el-row>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| header | Titre de la Card. Accepte aussi un template DOM passé via `slot#header`. | string| — | — |
| body-style | Style CSS du body. | object| — | { padding: '20px' } |
| shadow | Quand l'ombre doit apparaître | string | always / hover / never | always |

212
examples/docs/fr-FR/carousel.md Normal file
View File

@@ -0,0 +1,212 @@
## Carousel
Affiche en boucle une série d'images ou de textes dans un espace limité.
### Usage
:::demo Utilisez `el-carousel` avec `el-carousel-item`, et vous obtiendrez un carrousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise `el-carousel-item`. Par défaut le carrousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carrousel défilera uniquement quand vous cliquerez sur l'indicateur.
```html
<template>
<div class="block">
<span class="demonstration">Défile quand la souris passe sur l'indicateur (défaut)</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Défile quand on clique sur l'indicateur</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Indicateurs
Les indicateurs peuvent être affichés en dehors du carrousel.
:::demo L'attribut `indicator-position` détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carrousel, régler `indicator-position` sur `outside` les affichera à l'extérieur; régler `indicator-position` sur `none` les cachera totalement.
```html
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Flèches
Vous pouvez définir quand les flèches doivent apparaître.
:::demo L'attribut `arrow` détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carrousel. Réglez `arrow` sur `always` ou `never` affiche ou cache les flèches de manière permanente.
```html
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Mode carte
Quand la page est suffisamment large mais avec une hauteur limitée, vous pouvez activer le mode carte.
:::demo Réglez `type` sur `card` pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carrousel.
```html
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le défilement soit vertical en mettant `direction` à `vertical`.
:::demo
```html
<template>
<el-carousel height="200px" direction="vertical" :autoplay="false">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Attributs du Carrousel
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | Hauteur du carrousel. | string | — | — |
| initial-index | Index de la slide initiale (commence à 0). | number | — | 0 |
| trigger | Comment les indicateurs sont déclenchés | string | hover/click | hover |
| autoplay | Si le carrousel défile automatiquement | boolean | — | true |
| interval | Intervalle pour le défilement automatique, en millisecondes. | number | — | 3000 |
| indicator-position | Position des indicateurs. | string | outside/none | — |
| arrow | Détermine quand les flèches sont affichées. | string | always/hover/never | hover |
| type | Type du carrousel. | string | card | — |
| loop | Affiche les éléments en boucle. | boolean | - | true |
| direction | Détermine la direction du défilement. | string | horizontal/vertical | horizontal |
### Évènements du Carrousel
| Nom | Description | Paramètres |
|---------|---------|---------|
| change | Se déclenche quand la slide active défile. | Index de la nouvelle slide, index de l'ancienne slide |
### Méthodes du Carrousel
| Mathode | Description | Paramètres |
|---------- |-------------- | -- |
| setActiveItem | Défile manuellement vers une slide. | index de la slide d'arrivée, à partir de 0; ou bien le `name` du `el-carousel-item` correspondant|
| prev | Défile vers la slide précédente. | — |
| next | Défile vers la slide suivante. | — |
### Attributs du Carrousel-Item
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | Nom de l'item, peut être utilisé dans `setActiveItem`. | string | — | — |
| label | Texte affiché au niveau de l'indicateur correspondant.| string | — | — |

1987
examples/docs/fr-FR/cascader.md Normal file
View File

File diff suppressed because it is too large Load Diff

284
examples/docs/fr-FR/checkbox.md Normal file
View File

@@ -0,0 +1,284 @@
## Checkbox
Un groupe d'options à choix multiples.
### Usage
Checkbox peut être utilisé seul pour switcher entre deux états.
:::demo Définissez `v-model` (variable liée) dans `el-checkbox`. La valeur par défaut est un `Boolean` pour une seule `checkbox` et devient `true` quand elle est sélectionnée. Le contenu à l'intérieur de la balise `el-checkbox` deviendra le label du bouton de la checkbox.
```html
<template>
<!-- `checked` should be true or false -->
<el-checkbox v-model="checked">Option</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
```
:::
### Désactivation
La checkbox peut être désactivée.
:::demo Ajouter l'attribut `disabled`.
```html
<template>
<el-checkbox v-model="checked1" disabled>Option</el-checkbox>
<el-checkbox v-model="checked2" disabled>Option</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked1: false,
checked2: true
};
}
};
</script>
```
:::
### Checkbox groupées
Utile pour grouper des checkbox, indiquant si une option est sélectionnée en vérifiant la case en question.
:::demo L'élément `checkbox-group` peut gérer plusieurs checkbox d'un groupe en utilisant `v-model`, qui sera un `Array`. Dans l'élément `el-checkbox`, `label` est la valeur de la checkbox. S'il n'y a aucun contenu dans la balise, `label` sera également la description de la checkbox. `label` correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.
```html
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A"></el-checkbox>
<el-checkbox label="Option B"></el-checkbox>
<el-checkbox label="Option C"></el-checkbox>
<el-checkbox label="Désactivée" disabled></el-checkbox>
<el-checkbox label="Sélectionnée et désactivée" disabled></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data () {
return {
checkList: ['selected and disabled','Option A']
};
}
};
</script>
```
:::
### Indéterminée
La propriété `indeterminate` permet de réaliser un effet "Sélectionner tout".
:::demo
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Sélectionner tout</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
```
:::
### Minimum / Maximum d'éléments sélectionnés
Les propriétés `min` et `max` permettent de limiter la quantité d'éléments sélectionnés.
:::demo
```html
<template>
<el-checkbox-group
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data() {
return {
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions
};
}
};
</script>
```
:::
### Style bouton
Des checkbox avec une apparence de bouton.
:::demo Il vous suffit de changer `el-checkbox` en `el-checkbox-button`. Il existe aussi un attribut `size`.
```html
<template>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data () {
return {
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions
};
}
}
</script>
```
:::
### Bordures
:::demo L'attribut `border` ajoute une bordure aux checkbox.
```html
<template>
<div>
<el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
};
}
}
</script>
```
:::
### Attributs Checkbox
| Attribut | Description | Type | Options | Défaut|
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | La valeur liée. | string / number / boolean | — | — |
| label | Valeur de la checkbox quand utilisée dans un `checkbox-group`. | string / number / boolean | — | — |
| true-label | Valeur de la checkbox si cochée. | string / number | — | — |
| false-label | Valeur de la checkbox si non cochée. | string / number | — | — |
| disabled | Désactive la checkbox. | boolean | — | false |
| border | Ajoute une bordure à la checkbox. | boolean | — | false |
| size | taille de la checkbox, ne marche que si `border` est 'true' | string | medium / small / mini | — |
| name | Attribut 'name' natif. | string | — | — |
| checked | Si la checkbox est cochée. | boolean | — | false |
| indeterminate | Identique à `indeterminate` dans les checkbox natives. | boolean | — | false |
### Évènements Checkbox
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| change | Se déclenche quand la valeur change. | La nouvelle valeur |
### Attributs Checkbox-group
| Attribut | Description | Type | Options | Défaut|
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | La valeur liée. | array | — | — |
|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |
| disabled | Si les checkbox imbriquées sont désactivées. | boolean | — | false |
| min | Nombre minimum de checkbox cochées. | number | — | — |
| max | Nombre maximum de checkbox cochées. | number | — | — |
|text-color | Couleur de police quand le bouton est actif. | string | — | #ffffff |
|fill | Couleur de la bordure et du fond quand le bouton est actif. | string | — | #409EFF |
### Évènements Checkbox-group
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| change | Se déclenche quand la valeur change. | La nouvelle valeur |
### Attributs Checkbox-button
| Attribut | Description | Type | Options | Défaut|
|---------- |-------- |---------- |------------- |-------- |
| label | Valeur de la checkbox quand utilisée dans un `checkbox-group` | string / number / boolean | — | — |
| true-label | Valeur de la checkbox si cochée. | string / number | — | — |
| false-label | Valeur de la checkbox si non cochée. | string / number | — | — |
| disabled | Si la checkbox est désactivée. | boolean | — | false |
| name | Attribut 'name' natif. | string | — | — |
| checked | Si la checkbox est cochée. | boolean | — | false |

131
examples/docs/fr-FR/collapse.md Normal file
View File

@@ -0,0 +1,131 @@
## Collapse
Utilisez Collapse pour stocker du contenu.
### Usage
Vous pouvez agrandir plusieurs panneaux.
:::demo
```html
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="Cohérence" name="1">
<div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>
<div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Retour d'expérience: permets aux utilisateurs de percevoir clairement leurs opérations par le biais d'animations et d'effets interactifs.</div>
<div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>
</el-collapse-item>
<el-collapse-item title="Efficacité" name="3">
<div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
<div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>
<div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>
</el-collapse-item>
<el-collapse-item title="Controllabilité" name="4">
<div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>
<div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeNames: ['1']
};
},
methods: {
handleChange(val) {
console.log(val);
}
}
}
</script>
```
:::
### Accordéon
En mode accordéon, un seul panneau peut être ouvert à la fois.
:::demo Utilisez l'attribut `accordion` pour activer le mode accordéon.
```html
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Cohérence" name="1">
<div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>
<div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.</div>
<div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>
</el-collapse-item>
<el-collapse-item title="Efficacité" name="3">
<div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
<div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>
<div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>
</el-collapse-item>
<el-collapse-item title="Controllabilité" name="4">
<div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>
<div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeName: '1'
};
}
}
</script>
```
:::
### Titre personnalisé
En plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titres de panneau, ce qui rend possible l'ajout de contenu personnalisé, comme des icônes par exemple.
:::demo
```html
<el-collapse accordion>
<el-collapse-item name="1">
<template slot="title">
Cohérence<i class="header-icon el-icon-info"></i>
</template>
<div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>
<div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.</div>
<div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>
</el-collapse-item>
<el-collapse-item title="Efficacité" name="3">
<div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
<div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>
<div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>
</el-collapse-item>
<el-collapse-item title="Controllabilité" name="4">
<div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>
<div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>
</el-collapse-item>
</el-collapse>
```
:::
### Attributs de Collapse
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | Le panneau actuellement activé. | string (en mode accordéon) / array (en mode normal) | — | — |
| accordion | Active le mode accordéon. | boolean | — | false |
### Évènements de Collapse
| Nom | Description | Paramètres |
|---------|---------|---------|
| change | Se déclenche quand un panneau est activé / désactivé. | (activeNames: array (en mode normal) / string (en mode accordéon)) |
### Attributs de Collapse-Item
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | Identifiant unique du panneau. | string/number | — | — |
| title | Titre du panneau. | string | — | — |
| disabled | Désactive le panneau. | boolean | — | — |

123
examples/docs/fr-FR/color-picker.md Normal file
View File

@@ -0,0 +1,123 @@
## ColorPicker
ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
### Usage
:::demo ColorPicker nécessite une variable de type string liée à v-model.
```html
<div class="block">
<span class="demonstration">Avec valeur par défaut</span>
<el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
<span class="demonstration">Sans valeur par défaut</span>
<el-color-picker v-model="color2"></el-color-picker>
</div>
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null
}
}
};
</script>
```
:::
### Canal Alpha
:::demo ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut `show-alpha`.
```html
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
</script>
```
:::
### Couleurs prédéfinies
:::demo ColorPicker supporte les couleurs prédéfinies.
```html
<el-color-picker
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
}
}
};
</script>
```
:::
### Tailles
:::demo
```html
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color: '#409EFF'
}
}
};
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | La valeur liée. | string | — | — |
| disabled | Désactive le ColorPicker. | boolean | — | false |
| size | Taille du ColorPicker. | string | — | medium / small / mini |
| show-alpha | Affiche la sélection du canal alpha. | boolean | — | false |
| color-format | Format de couleur du v-model. | string | hsl / hsv / hex / rgb | hex (quand show-alpha est false)/ rgb (quand show-alpha est true) |
| popper-class | Classe du menu déroulant du ColorPicker. | string | — | — |
| predefine | Couleurs prédéfinies. | array | — | — |
### Évènements
| Nom | Description | Paramètres |
|---------|--------|---------|
| change | Se déclenche quand la valeur change. | La valeur de la couleur |
| active-change | Se déclenche quand la couleur active change. | La valeur de la couleur active |

227
examples/docs/fr-FR/color.md Normal file
View File

@@ -0,0 +1,227 @@
<script>
import bus from '../../bus';
import { tintColor } from '../../color.js';
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
'textPrimary': '$--color-text-primary',
'textRegular': '$--color-text-regular',
'textSecondary': '$--color-text-secondary',
'textPlaceholder': '$--color-text-placeholder',
'borderBase': '$--border-color-base',
'borderLight': '$--border-color-light',
'borderLighter': '$--border-color-lighter',
'borderExtraLight': '$--border-color-extra-light'
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
textPrimary: '#303133',
textRegular: '#606266',
textSecondary: '#909399',
textPlaceholder: '#C0C4CC',
borderBase: '#DCDFE6',
borderLight: '#E4E7ED',
borderLighter: '#EBEEF5',
borderExtraLight: '#F2F6FC'
}
export default {
created() {
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
textPrimary: '',
textRegular: '',
textSecondary: '',
textPlaceholder: '',
borderBase: '',
borderLight: '',
borderLighter: '',
borderExtraLight: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
</script>
## Couleur
Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.
### Couleur principale
La couleur principale d'Element est un bleu clair et agréable.
<el-row :gutter="12">
<el-col :span="10" :xs="{span: 12}">
<div class="demo-color-box" :style="{ background: primary }">Couleur principale
<div class="value">#409EFF</div>
<div class="bg-color-sub" :style="{ background: tintColor(primary, 0.9) }">
<div
class="bg-blue-sub-item"
v-for="(item, key) in Array(8)"
:key="key"
:style="{ background: tintColor(primary, (key + 1) / 10) }"
></div>
</div>
</div>
</el-col>
</el-row>
### Couleurs secondaires
En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box" :style="{ background: success }">Succès
<div class="value">#67C23A</div>
<div class="bg-color-sub">
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(success, (key + 8) / 10) }"
></div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box" :style="{ background: warning }">Avertissement
<div class="value">#E6A23C</div>
<div class="bg-color-sub">
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(warning, (key + 8) / 10) }"
></div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box" :style="{ background: danger }">Danger
<div class="value">#F56C6C</div>
<div class="bg-color-sub">
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(danger, (key + 8) / 10) }"
></div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box" :style="{ background: info }">Info
<div class="value">#909399</div>
<div class="bg-color-sub">
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(info, (key + 8) / 10) }"
></div>
</div>
</div>
</el-col>
</el-row>
### Couleurs neutres
Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPrimary }"
>Texte principal<div class="value">{{textPrimary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textRegular }"
>
Texte normal<div class="value">{{textRegular}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textSecondary }"
>Texte secondaire<div class="value">{{textSecondary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPlaceholder }"
>Texte de placeholder<div class="value">{{textPlaceholder}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderBase }"
>Bordure de base<div class="value">{{borderBase}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLight }"
>Bordure claire<div class="value">{{borderLight}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLighter }"
>Bordure très claire<div class="value">{{borderLighter}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderExtraLight }"
>Bordure extra claire<div class="value">{{borderExtraLight}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div
class="demo-color-box demo-color-box-other"
:style="{ background: black }"
>Noir<div class="value">{{black}}</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
>Blanc<div class="value">{{white}}</div></div>
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
</div>
</div>
</el-col>
</el-row>

240
examples/docs/fr-FR/container.md Normal file
View File

@@ -0,0 +1,240 @@
## Container
Les composants Container servent à structurer la page:
`<el-container>`: Conteneur de wrapping. Quand il est placé à l'intérieur de `<el-header>` ou `<el-footer>`, tous les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.
`<el-header>`: Conteneur pour headers.
`<el-aside>`: Conteneur pour section latérale (en général un menu).
`<el-main>`: Conteneur pour la section principal.
`<el-footer>`: Conteneur pour footers.
:::tip
Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `<el-container>` doivent être un des quatre éléments précédents, leur élément père devant obligatoirement être `<el-container>`.
:::
### Mises en page habituelles
:::demo
```html
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
```
:::
### Exemple
:::demo
```html
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
```
:::
### Attributs de Container
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| direction | Direction d'affichage pour les éléments enfants. | string | horizontal / vertical | vertical quand dans `el-header` ou `el-footer`; horizontal sinon |
### Attributs de Header
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | Hauteur du header. | string | — | 60px |
### Attributs de Aside
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| width | Largeur de la section. | string | — | 300px |
### Attributs de Footer
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | Hauteur du footer. | string | — | 60px |

134
examples/docs/fr-FR/custom-theme.md Normal file
View File

@@ -0,0 +1,134 @@
## Thème
Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.
### Theme Roller
Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
### Changer la couleur du thème
Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.
Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).
### Mettre à jour les variables SCSS de votre projet
`theme-chalk` est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. `element-variables.scss`:
```html
/* couleur du thème */
$--color-primary: teal;
/* chemin vers le fichier de police, requis */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
```
Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:
```JS
import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)
```
:::tip
Il est obligatoire de remplacer le chemin du fichier de police.
:::
### Outil de thème CLI
Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:
#### <strong>Installation</strong>
Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.
```shell
npm i element-theme -g
```
Installer ensuite le thème chalk depuis npm ou GitHub.
```shell
# Via npm
npm i element-theme-chalk -D
# Via GitHub
npm i https://github.com/ElementUI/theme-chalk -D
```
#### <strong>Initialisation d'un fichier de variable</strong>
Après l'installation des paquets ci-dessus, une commande appelée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour initialiser le fichier de variables, `element-variables.scss` par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.
```shell
et -i [nom du fichier]
> ✔ Generator variables file
```
Dans `element-variables.scss` vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet:
```css
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;
...
```
#### <strong>Modifier les variables</strong>
Éditer `element-variables.scss`, e.g. en changeant la couleur du thème pour du rouge:
```CSS
$--color-primary: red;
```
#### <strong>Générer le thème</strong>
Après avoir sauvegardé le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier. Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`.
```shell
et
> ✔ build theme font
> ✔ build element theme
```
### Use custom theme
#### <strong>Importer le thème</strong>
Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
```javascript
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
```
#### <strong>Importer le thème d'un composant sur demande</strong>
Si vous utilisez `babel-plugin-component` pour les imports sur demande, modifiez `.babelrc` et spécifiez `styleLibraryName` avec le chemin où votre thème est localisé relativement à `.babelrc`. N'oubliez pas que `~` est requis:
```json
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]
]
}
```
Si vous n'êtes pas familier avec `babel-plugin-component`, référez-vous à la page <a href="./#/fr-FR/component/quickstart">Guide</a>. Pour plus d'informations, jetez un oeil au [dépôt du projet](https://github.com/ElementUI/element-theme) de `element-theme`.

490
examples/docs/fr-FR/date-picker.md Normal file
View File

@@ -0,0 +1,490 @@
## DatePicker
Utilisez DatePicker pour les champs de dates.
### Entrez la date
L'unité de base du DatePicker est le jour.
:::demo L'unité est déterminée par l'attribut `type`. Vous pouvez ajouter des options en créant un objet `picker-options` avec la propriété `shortcuts`. L'état désactivé est contrôlé par `disabledDate` qui est une fonction.
```html
<template>
<div class="block">
<span class="demonstration">Défaut</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Choississez un jour">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Picker avec raccourcis</span>
<el-date-picker
v-model="value2"
type="date"
placeholder="Choississez un jour"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: 'Aujourd\'hui',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Hier',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'Il y a une semaine',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
};
}
};
</script>
```
:::
### Autres unités
Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs.
:::demo
```html
<div class="container">
<div class="block">
<span class="demonstration">Semaine</span>
<el-date-picker
v-model="value1"
type="week"
format="Week WW"
placeholder="Sélectionnez une semaine">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Mois</span>
<el-date-picker
v-model="value2"
type="month"
placeholder="Sélectionnez un mois">
</el-date-picker>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">Année</span>
<el-date-picker
v-model="value3"
type="year"
placeholder="Sélectionnez une année">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value4"
placeholder="Sélectionnez une ou plusieurs dates">
</el-date-picker>
</div>
</div>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: ''
};
}
};
</script>
```
:::
### Plage de dates
Vous pouvez sélectionner une plage de dates.
:::demo Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut `unlink-panels`.
```html
<template>
<div class="block">
<span class="demonstration">Défaut</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="à"
start-placeholder="Date de début"
end-placeholder="Date de fin">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Avec des options</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="à"
start-placeholder="Date de début"
end-placeholder="Date de fin"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Semaine dernière',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Mois dernier',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Trois derniers mois',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Plage de mois
Vous pouvez sélectionner une plage de mois.
:::demo Lorsque ce mode est activé, les panneaux gauche et droit sont liés par défaut. Si vous voulez que les deux panneaux switch indépendamment les années en cours, vous pouvez utiliser l'attribut `unlink-panels`.
```html
<template>
<div class="block">
<span class="demonstration">Défaut</span>
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="à"
start-placeholder="Mois de début"
end-placeholder="Mois de fin">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Avec options</span>
<el-date-picker
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="à"
start-placeholder="Mois de début"
end-placeholder="Mois de fin"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Ce mois',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: 'Cette année',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Les derniers 6 mois',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Valeur par défaut
Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez `default-value` pour montrer une autre date. Sa valeur doit être parsable par `new Date()`.
Si le type est `daterange`, `default-value` configure la panneau de gauche.
:::demo
```html
<template>
<div class="block">
<span class="demonstration">Date</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Sélectionnez une date"
default-value="2010-10-01">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Plage de dates</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
start-placeholder="Date de début"
end-placeholder="Date de fin"
default-value="2010-10-01">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Formats de date
Utilisez `format` pour contrôler l'affichage de la date dans le champ. Utilisez `value-format` pour contrôler le format de la variable stockée.
Par défaut, le composant accepte et émet un objet `Date`. Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple:
:::warning
Attention à la capitalisation !
:::
| Format | Signification | Note | Exemple |
|------|------|------|------|------|
| `yyyy` | Année | | 2017 |
| `M` | Mois | pas de 0 au début | 1 |
| `MM` | Mois | | 01 |
| `MMM` | Mois | | Jan |
| `MMMM` | Mois | | Janvier |
| `W` | Semaine | uniquement pour les `format` des types 'semaine' ; pas de 0 au début | 1 |
| `WW` | Semaine | uniquement pour les `format` des types 'semaine' | 01 |
| `d` | Jour | pas de 0 au début | 2 |
| `dd` | Jour | | 02 |
| `H` | Heure | Horloge 24 heures; pas de 0 au début | 3 |
| `HH` | Heure | Horloge 24 heures | 03 |
| `h` | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a`; pas de 0 au début | 3 |
| `hh` | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a` | 03 |
| `m` | Minute | pas de 0 au début | 4 |
| `mm` | Minute | | 04 |
| `s` | Seconde | pas de 0 au début | 5 |
| `ss` | Seconde | | 05 |
| `A` | AM/PM | uniquement pour `format`, majuscules | AM |
| `a` | am/pm | uniquement pour `format`, minuscules | am |
| `timestamp` | timestamp JS | uniquement pour `value-format`; la variable stockée sera un `number` | 1483326245000 |
| `[MM]` | Pas de caractère d'échappement | Pour échapper des caractères, placez-les entre crochets (ex: [A] [MM]) | MM |
:::demo
```html
<template>
<div class="block">
<span class="demonstration">Émet un objet Date</span>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="Sélectionnez une date"
format="yyyy/MM/dd">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Utilise value-format</span>
<div class="demonstration">Value: {{ value2 }}</div>
<el-date-picker
v-model="value2"
type="date"
placeholder="Sélectionnez une date"
format="yyyy/MM/dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">Value：{{ value3 }}</div>
<el-date-picker
v-model="value3"
type="date"
placeholder="Sélectionnez une date"
format="yyyy/MM/dd"
value-format="timestamp">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: ''
};
}
};
</script>
```
:::
### Horaire par défaut pour les dates de fin et de début
Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates.
:::demo Par défaut, l'horaire pour les dates de début et de fin est `00:00:00`. Configurez `default-time` pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format `12:00:00`. Le premier est pour la date de début, le deuxième pour la date de fin.
```html
<template>
<div class="block">
<p>Valeur: {{ value }}</p>
<el-date-picker
v-model="value"
type="daterange"
start-placeholder="Date de début"
end-placeholder="Date de fin"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | La valeur liée. | date(DatePicker) / array(DateRangePicker) | — | — |
| readonly | Si le DatePicker est en lecture seule. | boolean | — | false |
| disabled | Si le DatePicker est désactivé. | boolean | — | false |
| size | Taille du champs. | string | large/small/mini | — |
| editable | Si le champ est éditable. | boolean | — | true |
| clearable | Si la croix de reset doit apparaître. | boolean | — | true |
| placeholder | Le placeholder en mode normal. | string | — | — |
| start-placeholder | Le placeholder pour la date de début en mode plage de dates. | string | — | — |
| end-placeholder | Le placeholder pour la date de fin en mode plage de dates. | string | — | — |
| type | Type du picker. | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
| format | Format d'affichage dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date). | yyyy-MM-dd |
| align | Alignement. | left/center/right | left |
| popper-class | Nom de classe pour le menu déroulant du DatePicker. | string | — | — |
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
| range-separator | Séparateur de plage de dates. | string | — | '-' |
| default-value | Date par défaut du calendrier, optionnelle. | Date | Tout ce qui est accepté par `new Date()` | — |
| default-time | Horaire par défaut quand on sélectionne une plage dates, optionnel. | string[] | Tableau de taille 2, chaque valeur est au format `12:00:00`. La première pour la date de début, la deuxième pour la date de fin. | — |
| value-format | Format de la variable stockée, optionnel. Si non spécifié, la valeur sera un objet Date. | string | Voir [formats de date](#/en-US/component/date-picker#formats-de-date) | — |
| name | Identique au `name` de l'input natif | string | — | — |
| unlink-panels | Rend indépendants les deux panneaux de plage de dates. | boolean | — | false |
| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
| clear-icon | Icône de reset. | string | — | el-icon-circle-close |
| validate-event | Si la validation doit être déclenchée. | boolean | - | true |
### Options du Picker
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |
| onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |
### Raccourcis
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | Titre du raccourci. | string | — | — |
| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — |
### Évènements
| Nom | Description | Paramètres |
|---------|--------|---------|
| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |
| blur | Se déclenche quand le champ perds le focus. | component instance |
| focus | Se déclenche quand le champ a le focus. | component instance |
### Méthodes
| Méthode | Description | Paramètres |
|------|--------|-------|
| focus | Focus sur le champ. | — |
### Slots
| Nom | Description |
|---------|-------------|
| range-separator | Séparateur d'intervalle personnalisé. |

241
examples/docs/fr-FR/datetime-picker.md Normal file
View File

@@ -0,0 +1,241 @@
## DateTimePicker
Sélectionnez une date et une heure dans un seul picker.
:::tip
DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur `pickerOptions` et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.
:::
### Date et horaire
:::demo Vous pouvez sélectionner une date et un horaire en un seul picker en réglant `type` sur `datetime`. La manière d'utiliser des raccourcis est la même que pour DatePicker.
```html
<template>
<div class="block">
<span class="demonstration">Défaut</span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="Selectionnez date et horaire">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Avec raccourcis</span>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="Selectionnez date et horaire"
:picker-options="pickerOptions">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Avec horaire par défaut</span>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="Selectionnez date et horaire"
default-time="12:00:00">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Aujourd\'hui',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Hier',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'Il y a une semaine',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
value3: ''
};
}
};
</script>
```
:::
### Plage de dates et d'horaires
:::demo Vous pouvez sélectionner des plages en configurant `type` sur `datetimerange`.
```html
<template>
<div class="block">
<span class="demonstration">Défaut</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="à"
start-placeholder="Date de début"
end-placeholder="Date de fin">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Avec raccourcis</span>
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="à"
start-placeholder="Date de début"
end-placeholder="Date de fin"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'La semaine passée',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Le mois dernier',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Les 2 derniers mois',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};
}
};
</script>
```
:::
### Horaire par défaut pour les plages de dates
:::demo Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type `datetimerange`, `00:00:00` sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut `default-time`. Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.
```html
<template>
<div class="block">
<span class="demonstration">Heure de la date de début 12:00:00</span>
<el-date-picker
v-model="value1"
type="datetimerange"
start-placeholder="Date de début"
end-placeholder="Date de fin"
:default-time="['12:00:00']">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>
<el-date-picker
v-model="value2"
type="datetimerange"
align="right"
start-placeholder="Date de début"
end-placeholder="Date de fin"
:default-time="['12:00:00', '08:00:00']">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | La valeur liée. | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
| readonly | Si le DatePicker est en lecture seule. | boolean | — | false |
| disabled | Si le DatePicker est désactivé. | boolean | — | false |
| editable | Si le champ est éditable. | boolean | — | true |
| clearable | Si la croix de reset doit apparaître. | boolean | — | true |
|size | Taille du champ. | string | large/small/mini | — |
| placeholder | Le placeholder en mode normal. | string | — | — |
| start-placeholder | Le placeholder de la date de début en mode plage de dates. | string | — | — |
| end-placeholder | Le placeholder de la date de fin en mode plage de dates. | string | — | — |
| time-arrow-control | Si l'horaire peut être sélectionné en utilisant les flèches de direction. | boolean | — | false |
| type | Type du picker. | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | Format d'affichage de la date dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | yyyy-MM-dd HH:mm:ss |
| align | Alignements. | left/center/right | left |
| popper-class | Nom de classe pour le menu déroulant du DateTimePicker. | string | — | — |
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
| range-separator | Séparateur de plage. | string | - | '-' |
| default-value | Date par défaut du calendrier, optionnelle. | Date | N'importe quelle valeur acceptée par `new Date()` | — |
| default-time | L'horaire par défaut après avoir choisi une date. | normal: string / plage de dates: string[] | normal: un string tel que `12:00:00`, range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non spécifié, `00:00:00` est utilisé. | — |
| value-format | Format de la variable stockée, optionnel. Si non spécifié, La valeur sera un objet Date. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | — |
| name | Identique au `name` de l'input natif | string | — | — |
| unlink-panels | Rend indépendants les deux panneaux de plage de dates | boolean | — | false |
| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
| clear-icon | Icône de reset | string | — | el-icon-circle-close |
### Options du Picker
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |
| disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |
### Raccourcis
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | Titre du raccourci. | string | — | — |
| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — |
### Évènements
| Nom | Description | Paramètres |
|---------|--------|---------|
| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |
| blur | Se déclenche quand le champ perds le focus. | component instance |
| focus | Se déclenche quand le champ a le focus. | component instance |
### Méthodes
| Méthode | Description | Paramètres |
|------|--------|-------|
| focus | Focus sur le champ. | — |

244
examples/docs/fr-FR/dialog.md Normal file
View File

@@ -0,0 +1,244 @@
## Dialog
Informe les utilisateurs tout en préservant l'état de la page.
### Usage
Le Dialog ouvre un modal personnalisable.
:::demo Configurez l'attribut `visible` avec un `Boolean`, un modal apparaîtra quand la valeur sera à `true`. Le Dialog possède deux parties: `body` et `footer`, ce-dernier nécessitant un `slot` appelé `footer`. L'attribut optionnel `title` (vide par défaut) définit le titre. Cet exemple montre également comment `before-close` peut être utilisé.
```html
<el-button type="text" @click="dialogVisible = true">Cliquez pour ouvrir le modal</el-button>
<el-dialog
title="Tips"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>Ceci est un message</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Annuler</el-button>
<el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('Voulez-vous vraiment quitter ?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
`before-close` ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. S'il y a des boutons dans le `footer`, vous pouvez configurer `before-close` grâce à leur évènement click.
:::
### Personalisation
Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
:::demo
```html
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">Ouvrir un modal avec tableau</el-button>
<el-dialog title="Adresse d'expédition" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Nom" width="200"></el-table-column>
<el-table-column property="address" label="Adresse"></el-table-column>
</el-table>
</el-dialog>
<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">Ouvrir un modal avec formulaire</el-button>
<el-dialog title="Adresse d'expédition" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="Nom de promotion" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Zones" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Sélectionnez une zone">
<el-option label="Zone No.1" value="shanghai"></el-option>
<el-option label="Zone No.2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Annuler</el-button>
<el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-03',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
}
};
</script>
```
:::
### Dialog imbriqué
Si un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis.
:::demo Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. Si vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut `append-to-body` du Dialog imbriqué à `true` et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.
```html
<template>
<el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>
<el-dialog title="Modal extérieur" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="Modal intérieur"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">Annuler</el-button>
<el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
```
:::
### Centrer le contenu
Le contenu du modal peut être centré.
:::demo Régler `center` à `true` centrera horizontalement le header et le footer. `center` n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.
```html
<el-button type="text" @click="centerDialogVisible = true">Cliquez pour ouvrir le modal</el-button>
<el-dialog
title="Attention"
:visible.sync="centerDialogVisible"
width="30%"
center>
<span>Le contenu du modal n'est pas centré par défaut.</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">Annuler</el-button>
<el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
centerDialogVisible: false
};
}
};
</script>
```
:::
:::tip
Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via `ref`, vous pouvez le faire avec la callback de l'évènement `open`.
:::
:::tip
Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync` ne peut pas fonctionner. Dans ce cas retirez-le, écoutez les évènements `open` et `close`, et commitez les mutations Vuex pour mettre à jour la valeur de cette variable.
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| visible | Visibilité du Dialog, supporte le modificateur .sync. | boolean | — | false |
| title | Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante). | string | — | — |
| width | Largeur du Dialog. | string | — | 50% |
| fullscreen | Si le Dialog doit être en plein écran. | boolean | — | false |
| top | Valeur du `margin-top` du CSS du Dialog. | string | — | 15vh |
| modal | Si un masque est affiché. | boolean | — | true |
| modal-append-to-body | S'il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean | — | true |
| append-to-body | S'il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean | — | false |
| lock-scroll | Si le défilement du body est désactivé. | boolean | — | true |
| custom-class | Nom de classe pour le Dialog | string | — | — |
| close-on-click-modal | Si le Dialog peut être fermé en cliquant sur le masque. | boolean | — | true |
| close-on-press-escape | Si le Dialog peut être fermé en appuyant sur Echap. | boolean | — | true |
| show-close | Si le bouton de fermeture doit apparaître. | boolean | — | true |
| before-close | Callback avant la fermeture du Dialog. | function(done)，done est utilisé pour fermer le Dialog. | — | — |
| center | Si le header et le footer doivent être centrés. | boolean | — | false |
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
### Slot
| Nom | Description |
|------|--------|
| — | Contenu du Dialog. |
| title | Contenu du titre. |
| footer | Contenu du footer. |
### Évènements
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| open | Se déclenche quand le Dialog s'ouvre. | — |
| opened | Se déclenche quand l'animation d'ouverture est terminée. | — |
| close | Se déclenche quand le Dialog se ferme. | — |
| closed | Se déclenche quand l'animation de fermeture du Dialog est terminée. | — |

61
examples/docs/fr-FR/divider.md Normal file
View File

@@ -0,0 +1,61 @@
## Divider
Une ligne de séparation entre deux contenus.
### Usage basique
Séparer le texte de deux paragraphes.
:::demo
```html
<template>
<div>
<span>Je suis assis à ma fenêtre ce matin où le monde, tel un passant, s’arrête un instant, me fait signe de la tête et part.</span>
<el-divider></el-divider>
<span>Les petites pensées sont le bruissement des feuilles; ils ont leur murmure de joie dans mon esprit.</span>
</div>
</template>
```
:::
### Contenu personnalisé
Vous ajouter du contenu dans la ligne de séparation.
:::demo
```html
<template>
<div>
<span>Vous ne voyez pas ce que vous êtes, ce que vous voyez est votre ombre.</span>
<el-divider content-position="left">Rabindranath Tagore</el-divider>
<span>Je ne peux pas choisir le meilleur. Le meilleur me choisit.</span>
<el-divider><i class="el-icon-star-on"></i></el-divider>
<span>Mes souhaits sont des imbéciles, ils crient à travers ta chanson, mon Maître. Laisse-moi mais écoute.</span>
<el-divider content-position="right">Rabindranath Tagore</el-divider>
</div>
</template>
```
:::
### Séparation verticale
:::demo
```html
<template>
<div>
<span>Pluie</span>
<el-divider direction="vertical"></el-divider>
<span>Maison</span>
<el-divider direction="vertical"></el-divider>
<span>Herbe</span>
</div>
</template>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|------------- |---------------- |---------------- |---------------------- |-------- |
| direction | Règle la direction du séparateur. | string | horizontal / vertical | horizontal |
| content-position | Personnalise le contenu du séparateur. | String | left / right / center | center |

305
examples/docs/fr-FR/drawer.md Normal file
View File

@@ -0,0 +1,305 @@
## Drawer
Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
### Basic Usage
Callout a temporary drawer, from multiple direction
:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
```html
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<span>Hi, there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) {
this.$confirm('Are you sure you want to close this?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
### No Title
When you no longer need a title, you can remove title from drawer.
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### Customization Content
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
:::demo
```html
<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
<el-drawer
title="I have a nested table inside!"
:visible.sync="table"
direction="rtl"
size="50%">
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Name" width="200"></el-table-column>
<el-table-column property="address" label="Address"></el-table-column>
</el-table>
</el-drawer>
<el-drawer
title="I have a nested form inside!"
:before-close="handleClose"
:visible.sync="dialog"
direction="ltr"
custom-class="demo-drawer"
ref="drawer"
>
<div class="demo-drawer__content">
<el-form :model="form">
<el-form-item label="Name" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Area" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select activity area">
<el-option label="Area1" value="shanghai"></el-option>
<el-option label="Area2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
</el-drawer>
<script>
export default {
data() {
return {
table: false,
dialog: false,
loading: false,
gridData: [{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City'
}],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '80px',
timer: null,
};
},
methods: {
handleClose(done) {
if (this.loading) {
return;
}
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
this.timer = setTimeout(() => {
done();
// animation takes time
setTimeout(() => {
this.loading = false;
}, 400);
}, 2000);
})
.catch(_ => {});
},
cancelForm() {
this.loading = false;
this.dialog = false;
clearTimeout(this.timer);
}
}
}
</script>
```
:::
### Nested Drawer
You can also have multiple layer of `Drawer` just like `Dialog`.
:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I'm outer Drawer"
:visible.sync="drawer"
size="50%">
<div>
<el-button @click="innerDrawer = true">Click me!</el-button>
<el-drawer
title="I'm inner Drawer"
:append-to-body="true"
:before-close="handleClose"
:visible.sync="innerDrawer">
<p>_(:зゝ∠)_</p>
</el-drawer>
</div>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
innerDrawer: false,
};
},
methods: {
handleClose(done) {
this.$confirm('You still have unsaved data, proceed?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
:::
:::tip
Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
:::
:::tip
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
:::
### Drawer Attributes
| Parameter| Description | Type | Acceptable Values | Defaults |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
| custom-class | Extra class names for Drawer | string | — | — |
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
| modal | Should show shadowing layer | boolean | — | true |
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
### Drawer Slot
| Name | Description |
|------|--------|
| — | Drawer's Content |
| title | Drawer Title Section |
### Drawer Methods
| Name | Description |
| ---- | --- |
| closeDrawer | In order to close Drawer, this method will call `before-close`. |
### Drawer Events
| Event Name | Description | Parameter |
|---------- |-------- |---------- |
| open | Triggered before Drawer opening animation begins | — |
| opened | Triggered after Drawer opening animation ended | — |
| close | Triggered before Drawer closing animation begins | — |
| closed | Triggered after Drawer closing animation ended | — |

307
examples/docs/fr-FR/dropdown.md Normal file
View File

@@ -0,0 +1,307 @@
## Dropdown
Menu déroulant pour afficher des listes de liens et d'actions possibles.
### Usage
Passez sur le menu avec la souris pour dérouler son contenu.
:::demo L'élément déclencheur est généré par le `slot` par défaut, et le menu déroulant est généré par le `slot` appelé `dropdown`. Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.
```html
<el-dropdown>
<span class="el-dropdown-link">
Menu déroulant<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
```
:::
### Élément déclencheur
Utilisez le bouton pour ouvrir le menu déroulant.
:::demo Utilisez `split-button` pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.
```html
<el-dropdown>
<el-button type="primary">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
Liste déroulante
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleClick() {
alert('button click');
}
}
}
</script>
```
:::
### Déclencheur
Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.
:::demo Utilisez l'attribut `trigger`. Par défaut, il est à `hover`.
```html
<el-row class="block-col-2">
<el-col :span="12">
<span class="demonstration">En passant la souris</span>
<el-dropdown>
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="12">
<span class="demonstration">En cliquant</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
```
:::
### Fermer le menu
Utilisez l'attribut `hide-on-click` pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.
:::demo Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant `hide-on-click` à `false`.
```html
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
```
:::
### Évènement command
Cliquer sur un élément du dropdown déclenche un évènement "command".
Le paramètre de cet évènement peut être assigné à chaque élément de la liste.
:::demo
```html
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c">Action 3</el-dropdown-item>
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleCommand(command) {
this.$message('click on item ' + command);
}
}
}
</script>
```
:::
### Tailles
En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.
:::demo Utilisez `size` pour déterminer une autre taille parmi `medium`, `small` ou `mini`.
```html
<el-dropdown split-button type="primary">
Défaut
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
Medium
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
Small
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
Mini
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
:::
### Attributs du Dropdown
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | Type du bouton, se référer au composant `Button`. Ne marche que si `split-button` est `true`. | string | — | — |
| size | Taille du menu, marche aussi avec `split button`. | string | medium / small / mini | — |
| split-button | Si le bouton est séparé en deux. | boolean | — | false |
| placement | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | Comment déclencher l'ouverture du menu. | string | hover/click | hover |
| hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément. | boolean | — | true |
| show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |
| hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |
| tabindex | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Dropdown | number | — | 0 |
### Dropdown Slots
| Nom | Description |
|------|--------|
| — | Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. `<span>, <button> etc.`) ou `el-component`, pour y attacher un évènement. |
| dropdown | Contenu du menu du Dropdown, en général un élément `<el-dropdown-menu>`. |
### Évènements du Dropdown
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| click | Si `split-button` est `true`, se déclenche quand le bouton de gauche est cliqué. | — |
| command | Se déclenche quand un élément de la liste est cliqué. | L'attribut command de l'élément de la liste. |
| visible-change | Se déclenche quand le menu s'affiche ou disparaît. | `true` quand il apparaît, `false` sinon. |
### Attributs des éléments du menu
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|------------- |---------------- |---------------- |---------------------- |-------- |
| command | Le contenu à envoyer au callback de l'évènement `command` du Dropdown. | string/number/object | — | — |
| disabled | Si l'élément est désactivé. | boolean | — | false |
| divided | Si un diviseur doit être affiché. | boolean | — | false |
| icon | Classe de l'icône. | string | — | — |

650
examples/docs/fr-FR/form.md Normal file
View File

@@ -0,0 +1,650 @@
## Form
Un formulaire est constitué des éléments `input`, `radio`, `select`, `checkbox`, etc. Il sert principalement à collecter, vérifier et soumettre des données.
### Formulaire de base
Il peut contenir toutes sortes de champs tels que `input`, `select`, `radio` et `checkbox`.
:::demo Dans chaque composant `form`, il vous faudra utiliser la balise `form-item` pour servir de conteneur à chaque champ.
```html
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Choisissez une date" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="form.resource">
<el-radio label="Sponsor"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Créer</el-button>
<el-button>Annuler</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
```
:::
:::tip
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) stipule que
> <i>Lorsqu'il n'y a qu'un seul champ de type texte dans un formulaire, le navigateur devrait accepter la pression de la touche Entrée sur ce champ comme méthode de soumission du formulaire</i>
Pour éviter ce comportement, vous pouvez ajouter `@submit.native.prevent` dans `<el-form>`.
:::
### Formulaire horizontal
Lorsque l'espace vertical est limité et que le formulaire est relativement simple, vous pouvez le placer sur une seule ligne.
:::demo Mettez l'attribut `inline` à `true` et le formulaire sera en une seul ligne.
```html
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="Approved by">
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formInline: {
user: '',
region: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
```
:::
### Alignement
Suivant votre design, il y a différents moyens d'aligner vos labels.
:::demo L'attribut `label-position` permet de régler l'alignement, il peut être à `top` ou `left`. Quand il est à `top`, les labels sont placés au-dessus des champs.
```html
<el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">Left</el-radio-button>
<el-radio-button label="right">Right</el-radio-button>
<el-radio-button label="top">Top</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
<el-form-item label="Name">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
### Validation
Le composant Form vous permet d'effectuer des vérifications, afin de détecter et corriger les erreurs facilement.
:::demo Ajoutez l'attribut `rules` au composant `Form`, passez les règles de validation, et configurez l'attribut `prop` de `Form-Item` pour ajouter la clé de la règle correspondante au champ. Plus d'informations ici: [async-validator](https://github.com/yiminghe/async-validator).
```html
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="Activity name" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone" prop="region">
<el-select v-model="ruleForm.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="Choisissez une date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="Sponsorship"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">Créer</el-button>
<el-button @click="resetForm('ruleForm')">Réinitialiser</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
region: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
],
resource: [
{ required: true, message: 'Please select activity resource', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
:::
### Validations personnalisées
Cet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.
:::demo Ici, nous utilisons `status-icon` pour afficher le résultat de la validation sous forme d'icône.
```html
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
<el-button @click="resetForm('ruleForm')">Réinitialiser</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('Veuillez entrer l\'âge'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Veuillez entrer des chiffres'));
} else {
if (value < 18) {
callback(new Error('L\'âge doit être supérieur à 18 ans'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Veuillez entrer le mot de passe'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Veuillez entrer à nouveau le mot de passe'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('Les deux entrées ne correspondent pas!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
:::
:::tip
Les callback de validations personnalisées doivent être appelées. Un usage plus avancé se trouve ici: [async-validator](https://github.com/yiminghe/async-validator).
:::
### Ajouter ou supprimer des champs dynamiquement
:::demo En plus de pouvoir passer toutes les règles de validation en une seule fois au formulaire, vous pouvez aussi ajouter ou supprimer des règles sur un seul champ de manière dynamique.
```html
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
<el-form-item
prop="email"
label="Email"
:rules="[
{ required: true, message: 'Veuillez entrer l\'adresse e-mail', trigger: 'blur' },
{ type: 'email', message: 'Veuillez entrer une adresse e-mail valide', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'Domain' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: 'domain ne peut pas être null', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Supprimer</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Soumettre</el-button>
<el-button @click="addDomain">Nouveau domaine</el-button>
<el-button @click="resetForm('dynamicValidateForm')">Réinitialiser</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
key: 1,
value: ''
}],
email: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item);
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1);
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
}
}
}
</script>
```
:::
### Validation des nombres
:::demo Pour valider les nombres correctement, il vous faudra ajouter le modificateur `.number` à l'attribut `v-model`. Il est utilisé par Vuejs pour transformer les valeurs en nombres .
```html
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item
label="age"
prop="age"
:rules="[
{ required: true, message: 'l\'âge est requis'},
{ type: 'number', message: 'l\'âge doit être un nombre'}
]"
>
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">Soumettre</el-button>
<el-button @click="resetForm('numberValidateForm')">Réinitialiser</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
numberValidateForm: {
age: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
:::
:::tip
Lorsqu'un `el-form-item` est imbriqué dans un autre `el-form-item`, la largeur de son label sera `0`. Utilisez `label-width` sur ce `el-form-item` si besoin.
:::
### Taille
Tout les composants d'un formulaire héritent leur attribut `size` de ce formulaire. Il est aussi possible de l'utiliser individuellement sur chaque FormItem.
:::demo Vous pouvez régler le `size` de chaque item si vous ne souhaitez pas qu'il hérite de son parent.
```html
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
<el-form-item label="Activity name">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="sizeForm.region" placeholder="veuillez sélectionner votre zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Choisissez une date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="Choisissez une heure" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="sizeForm.type">
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio border label="Sponsor"></el-radio>
<el-radio border label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="onSubmit">Créer</el-button>
<el-button>Annuler</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
}
}
};
</script>
```
:::
### Attributs de Form
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| ---- | ----| ---- | ---- | ---- |
| model| Données du formulaire. | object | — | — |
| rules | Règles de validation du formulaire. | object | — | — |
| inline | Si le formulaire est horizontal. | boolean | — | false |
| label-position | Position des labels. Si 'left' ou 'right', `label-width` est aussi requis. | string | left / right / top | right |
| label-width | Largeur des labels, tout les enfants directs hériteront de cette valeur. La largeur `auto` est supportée. | string | — | — |
| label-suffix | Suffixe de labels. | string | — | — |
| hide-required-asterisk | Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels. | boolean | — | false |
| show-message | Si le message d'erreur doit apparaître. | boolean | — | true |
| inline-message | Si le message d'erreur doit apparaître en ligne avec son champ. | boolean | — | false |
| status-icon | Si une icône indiquant le résultat de validation doit apparaître. | boolean | — | false |
| validate-on-rule-change | Si la validation doit se déclencher lorsque `rules` est modifié. | boolean | — | true |
| size | Contrôle la taille des champs du formulaire. | string | medium / small / mini | — |
| disabled | Si tout les champs du formulaire doivent être désactivés. Si `true`, il ne peut pas être modifié par l'attribut `disabled` des enfants. | boolean | — | false |
### Méthodes de Form
| Méthode | Description | Paramètres |
| ---- | ---- | ---- |
| validate | Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée. | Function(callback: Function(boolean, object)) |
| validateField | Valide un ou plusieurs champs du formulaire. | Function(props: string \| array, callback: Function(errorMessage: string)) |
| resetFields | Efface tout les champs et les résultats de validation. | — |
| clearValidate | Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. S'il est omis, tout les champs seront concernés. | Function(props: string \| array) |
### Évènnements de Form
| Nom | Description | Paramètres |
|----------- |------------ |----------- |
| validate | Se déclenche après la validation d'un champ. | Nom du champs qui a été validé, si la validation est bonne et le message d'erreur sinon. |
### Attributs de FormItem
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| ---- | ----| ---- | ---- | ---- |
| prop | Une des clés de `model`. Utilisés par les méthodes validate et resetFields. Requis. | string | Clés du model passé à `form`. |
| label | Le label. | string | — | — |
| label-width | Largeur du label, e.g. '50px'. La largeur `auto` est supportée. | string | — | — |
| required | Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation. | boolean | — | false |
| rules | Règles de validation du formulaire. | object | — | — |
| error | Message d'erreur du champ. S'il est modifié, le champ l'affichera immédiatement. | string | — | — |
| show-message | Si le message d'erreur doit apparaître. | boolean | — | true |
| inline-message | Si le message d'erreur doit être en ligne avec le champ. | boolean | — | false |
| size | Contrôle la taille du FormItem. | string | medium / small / mini | - |
### Slot de Form-Item
| Nom | Description |
|------|--------|
| — | Contenu de Form Item. |
| label | Contenu du label. |
### Slot avec portée de Form-Item
| Nom | Description |
|---------------|-------------|
| error | Contenu personnalisé pour les messages de validation. Le paramètre du scope est { error }. |
### Méthodes de Form-Item
| Méthode | Description | Paramètres |
| ---- | ---- | ---- |
| resetField | Efface le champ et les résultats de validation. | — |
| clearValidate | Efface le status de validation du champ. | - |

229
examples/docs/fr-FR/i18n.md Normal file
View File

@@ -0,0 +1,229 @@
## Internationalisation
La langue par défaut d'Element est le Chinois. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element entièrement:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
```
Ou si vous importez Element à la demande:
```javascript
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// configure la langue
locale.use(lang)
// importe les composants
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
```
La pack de la langue Chinois est importé par défaut, même si vous configurez une autre langue. En utilisant le `NormalModuleReplacementPlugin` fournit par webpack vous pouvez remplacer la locale par défaut:
webpack.config.js
```javascript
{
plugins: [
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
]
}
```
## Compatible avec `vue-i18n@5.x`
Element est compatible avec [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), ce qui rend le changement de langue encore plus simple.
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
Vue.use(Element)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
```
## Compatible avec d'autres plugins i18n
Element n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.
```javascript
import Vue from 'vue'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(Element, {
i18n: function (path, options) {
// ...
}
})
```
## Compatible avec `vue-i18n@6.x`
Vous devrez le configurer manuellement pour la compatibilité avec `6.x`.
```javascript
import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const messages = {
en: {
message: 'hello',
...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`
},
zh: {
message: '你好',
...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`
}
}
// Crée l'instance de VueI18n avec ses options
const i18n = new VueI18n({
locale: 'en', // indique la locale
messages, // indique les messages
})
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({ i18n }).$mount('#app')
```
## i18n personnalisée dans les composants à la demande
```js
import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'
Vue.use(VueI18n)
Vue.use(DatePicker)
const messages = {
en: {
message: 'hello',
...enLocale
},
zh: {
message: '你好',
...zhLocale
}
}
// Crée l'instance de VueI18n avec ses options
const i18n = new VueI18n({
locale: 'en', // indique la locale
messages, // indique les messages
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
```
## Import via un CDN
```html
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script>
ELEMENT.locale(ELEMENT.lang.en)
</script>
```
Compatible avec `vue-i18n`
```html
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script>
Vue.locale('en', ELEMENT.lang.en)
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>
```
Actuellement, Element supporte les langues suivantes:
<ul class="language-list">
<li>Chinois simplifié (zh-CN)</li>
<li>Anglais (en)</li>
<li>Allemand (de)</li>
<li>Portugais (pt)</li>
<li>Espagnol (es)</li>
<li>Danois (da)</li>
<li>Français (fr)</li>
<li>Norvégien (nb-NO)</li>
<li>Chinois traditionnel (zh-TW)</li>
<li>Italien (it)</li>
<li>Coréen (ko)</li>
<li>Japonais (ja)</li>
<li>Néerlandais (nl)</li>
<li>Vietnamien (vi)</li>
<li>Russe (ru-RU)</li>
<li>Turque (tr-TR)</li>
<li>Portugais brésilien (pt-br)</li>
<li>Farsi (fa)</li>
<li>Thaï (th)</li>
<li>Indonésien (id)</li>
<li>Bulgare (bg)</li>
<li>Polonais (pl)</li>
<li>Finnois (fi)</li>
<li>Suédois (sv-SE)</li>
<li>Grec (el)</li>
<li>Slovaque (sk)</li>
<li>Catalan (ca)</li>
<li>Tchèque (cs-CZ)</li>
<li>Ukrainien (ua)</li>
<li>Turkmène (tk)</li>
<li>Tamoul (ta)</li>
<li>Letton (lv)</li>
<li>Afrikaans (af-ZA)</li>
<li>Estonien (ee)</li>
<li>Slovène (sl)</li>
<li>Arabe (ar)</li>
<li>Hébreu (he)</li>
<li>Lituanien (lt)</li>
<li>Mongol (mn)</li>
<li>Kazakh (kz)</li>
<li>Hongrois (hu)</li>
<li>Roumain (ro)</li>
<li>Kurde (ku)</li>
<li>Ouïghour (ug-CN)</li>
<li>Khmer (km)</li>
<li>Serbe (sr)</li>
<li>Basque (eu)</li>
<li>Kirghize (kg)</li>
<li>Croate (hr)</li>
<li>Arménien (hy)</li>
<li>Espéranto (eo)</li>
</ul>
Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration [ici](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) et créez une pull request.

29
examples/docs/fr-FR/icon.md Normal file
View File

@@ -0,0 +1,29 @@
## Icônes
Element fournit un ensemble d'icônes basiques.
### Usage
Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>`.
:::demo
```html
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">Chercher</el-button>
```
:::
### Icônes
<ul class="icon-list">
<li v-for="name in $icon" :key="name">
<span>
<i :class="'el-icon-' + name"></i>
<span class="icon-name">{{'el-icon-' + name}}</span>
</span>
</li>
</ul>

162
examples/docs/fr-FR/image.md Normal file
View File

@@ -0,0 +1,162 @@
## Image
En plus des propriétés natives de img, ce composant supporte le lazy loading, les placeholder personnalisés, les échecs de téléchargement, etc.
### Usage basique
:::demo Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur grâce à `fit`, identique au [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) natif.
```html
<div class="demo-image">
<div class="block" v-for="fit in fits" :key="fit">
<span class="demonstration">{{ fit }}</span>
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit"></el-image>
</div>
</div>
<script>
export default {
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
}
}
</script>
```
:::
### Placeholder
:::demo Placeholder personnalisé qui s'affiche lorsque l'image n'est pas encore chargée, grâce à `slot = placeholder`.
```html
<div class="demo-image__placeholder">
<div class="block">
<span class="demonstration">Défaut</span>
<el-image :src="src"></el-image>
</div>
<div class="block">
<span class="demonstration">Personnalisé</span>
<el-image :src="src">
<div slot="placeholder" class="image-slot">
Chargement<span class="dot">...</span>
</div>
</el-image>
</div>
</div>
<script>
export default {
data() {
return {
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}
}
}
</script>
```
:::
### Échec du chargement
:::demo Contenu personnalisé qui s'affiche lorsque le chargement a échoué, grâce à `slot = error`.
```html
<div class="demo-image__error">
<div class="block">
<span class="demonstration">Défaut</span>
<el-image></el-image>
</div>
<div class="block">
<span class="demonstration">Personnalisé</span>
<el-image>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</div>
```
:::
### Lazy Loading
:::demo Utilisez le lazy loading avec `lazy = true`. Les images ne se chargeront que lorsque le scrolling les atteindra. Vous pouvez indiquer le conteneur grâce à `scroll-container`. Si undefined, ce sera le conteneur parent le plus proche avec la propriété overflow à auto ou scroll.
```html
<div class="demo-image__lazy">
<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
</div>
<script>
export default {
data() {
return {
urls: [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
}
}
}
</script>
```
:::
### Image Preview
:::demo allow big image preview by setting `previewSrcList` prop.
```html
<div class="demo-image__preview">
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList">
</el-image>
</div>
<script>
export default {
data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| src | Source de l'image, identique au natif. | string | — | - |
| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
| alt | Attribut alt natif.| string | - | - |
| referrer-policy | Attribut referrerPolicy natif.| string | - | - |
| lazy | Si le lazy loading doit être utilisé. | boolean | — | false |
| scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
| preview-src-list | allow big image preview | Array | — | - |
| z-index | set image preview z-index | Number | — | 2000 |
### Évènements
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| load | Identique au load natif. | (e: Event) |
| error | Identique au error natif. | (e: Error) |
### Slots
| Nom | Description |
|---------|-------------|
| placeholder | Se déclenche quand l'image charge. |
| error | Se déclenche quand le chargement de l'image a échoué. |

87
examples/docs/fr-FR/infiniteScroll.md Normal file
View File

@@ -0,0 +1,87 @@
## InfiniteScroll
Charge plus de données quand le bas de la page est atteint
### Utilisation de base
Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la méthode de chargement lors du défilement vers le bas.
:::demo
```html
<template>
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
<li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
load () {
this.count += 2
}
}
}
</script>
```
:::
### Désactiver le chargement
:::demo
```html
<template>
<div class="infinite-list-wrapper" style="overflow:auto">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<li v-for="i in count" class="list-item">{{ i }}</li>
</ul>
<p v-if="loading">Loading...</p>
<p v-if="noMore">Pas plus</p>
</div>
</template>
<script>
export default {
data () {
return {
count: 10,
loading: false
}
},
computed: {
noMore () {
return this.count >= 20
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
load () {
this.loading = true
setTimeout(() => {
this.count += 2
this.loading = false
}, 2000)
}
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeur acceptées | Défaut |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| infinite-scroll-disabled | Est désactivé | boolean | - |false |
| infinite-scroll-delay | Throttle le delais (ms) | number | - |200 |
| infinite-scroll-distance| Distance de déclenchement (px) | number |- |0 |
| infinite-scroll-immediate | S'il faut exécuter la méthode de chargement immédiatement, au cas où le contenu ne pourrait pas être set à l'état initial. | boolean | - |true |

200
examples/docs/fr-FR/input-number.md Normal file
View File

@@ -0,0 +1,200 @@
## InputNumber
Un champ d'input de valeurs numériques, avec un domaine personnalisable.
### Usage
:::demo Liez une variable à `v-model` dans l'élément `<el-input-number>` et c'est tout !
```html
<template>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value)
}
}
};
</script>
```
:::
### Désactivé
:::demo L'attribut `disabled` accepte un `boolean` et si la valeur est `true`, le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut `min` pour régler la valeur minimale et `max` pour la valeur maximale. Par défaut, la valeur minimale est `0`.
```html
<template>
<el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
}
}
};
</script>
```
:::
### Pas
Vous pouvez déterminer un pas pour le champs.
:::demo Ajoutez l'attribut `step` pour configurer le pas.
```html
<template>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 5
}
}
};
</script>
```
:::
### Pas strict
:::demo L'attribut `step-strictly` accepte un `boolean`. Si cet attribut est `true`, la valeur de l'input ne peut être qu'un multiple de `step`.
```html
<template>
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 2
}
}
};
</script>
```
:::
### Précision
:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.
```html
<template>
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
}
}
};
</script>
```
:::
:::tip
La valeur de `precision` doit être un integer non négatif et ne doit pas être inférieure aux décimales de `step`.
:::
### Taille
Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `mini`.
:::demo
```html
<template>
<el-input-number v-model="num1"></el-input-number>
<el-input-number size="medium" v-model="num2"></el-input-number>
<el-input-number size="small" v-model="num3"></el-input-number>
<el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
export default {
data() {
return {
num1: 1,
num2: 1,
num3: 1,
num4: 1
}
}
};
</script>
```
:::
### Position des contrôles
:::demo Réglez `controls-position` pour déterminer la position des boutons.
```html
<template>
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|----| ----| ---| ----| -----|
| value / v-model | La valeur liée. | number | — | 0 |
| min | La valeur minimale autorisée. | number | — | `-Infinity` |
| max | La valeur maximale autorisée. | number | — | `Infinity` |
| step | Le pas pour l'incrémentation. | number | — | 1 |
| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | boolean | — | false |
| precision | La précision de la valeur. | number | — | — |
| size | La taille du composant. | string | large/small| — |
| disabled| Si le composant est désactivé. | boolean | — | false |
| controls| Si les boutons sont visibles. | boolean | — | true |
| controls-position | Position des boutons. | string | right | - |
| name | Identique à `name` dans l'input natif. | string | — | — |
| label | Texte du label. | string | — | — |
| placeholder | Placeholder du champ. | string | - | - |
### Évènements
| Nom | Description | Paramètres |
|----| ---- | -----|
| change | Se déclenche quand la valeur change. | currentValue, oldValue |
| blur | Se déclenche quand le champ perds le focus. | (event: Event) |
| focus | Se déclenche quand le champ a le focus. | (event: Event) |
### Méthodes
| Méthode | Description | Paramètres |
|------|--------|-------|
| focus | Met le focus sur le composant. | - |
| select | Sélectionne le texte dans le champ. | — |

669
examples/docs/fr-FR/input.md Normal file
View File

@@ -0,0 +1,669 @@
## Input
Le champ d'input de base.
:::warning
Input est un composant contrôlé, il **affiche toujours la valeur liée de Vue**.
En règle générale, l'évènement `input` devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez `v-model`). Dans le cas contraire, la valeur du champ ne sera pas modifiée.
Les modificateurs de `v-model` ne sont pas supportés.
:::
### Usage
:::demo
```html
<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### Désactivé
:::demo Désactivez l'input avec l'attribut `disabled`.
```html
<el-input
placeholder="Entrez quelque chose"
v-model="input"
:disabled="true">
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### Effaçable
:::demo Rendez l'input effaçable avec l'attribut `clearable`.
```html
<el-input
placeholder="Entrez quelque chose"
v-model="input"
clearable>
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### Champ de mot de passe
:::demo Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut `show-password`.
```html
<el-input placeholder="Entrez votre mot de passe" v-model="input" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### Input avec icône
Ajoutez une icône pour indiquer le type d'input.
:::demo Pour ajouter une icône, vous pouvez utiliser les attributs `prefix-icon` et `suffix-icon`. De plus, les slots nommés `prefix` et `suffix` fonctionnent aussi.
```html
<div class="demo-input-suffix">
<span class="demo-input-label">Avec les attributs</span>
<el-input
placeholder="Entrez une date"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
placeholder="Entrez du texte"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
<div class="demo-input-suffix">
<span class="demo-input-label">Avec les slots</span>
<el-input
placeholder="Entrez une date"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="Entrez du texte"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<style>
.demo-input-label {
display: inline-block;
width: 130px;
}
</style>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>
```
:::
### Zone de texte
Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut `type="textarea"` pour changer `input` en un `textarea` natif.
:::demo Réglez la hauteur grâce à la propriété `rows`.
```html
<el-input
type="textarea"
:rows="2"
placeholder="Entrez quelque chose"
v-model="textarea">
</el-input>
<script>
export default {
data() {
return {
textarea: ''
}
}
}
</script>
```
:::
### Zone de texte avec taille automatique
Configurer la propriété `autosize` pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à `autosize` les nombres minimal et maximal de lignes.
:::demo
```html
<el-input
type="textarea"
autosize
placeholder="Entrez quelque chose"
v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="Entrez quelque chose"
v-model="textarea2">
</el-input>
<script>
export default {
data() {
return {
textarea1: '',
textarea2: ''
}
}
}
</script>
```
:::
### Input mixte
Ajouter un élément avant ou après l'input, généralement du texte ou un bouton.
:::demo Utilisez `slot` pour ajouter des éléments avant ou après l'input.
```html
<div>
<el-input placeholder="Entrez quelque chose" v-model="input1">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Entrez quelque chose" v-model="input2">
<template slot="append">.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Entrez quelque chose" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="Choisir">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Num. Commande" value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<style>
.el-select .el-input {
width: 110px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
select: ''
}
}
}
</script>
```
:::
### Tailles
:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `large`, `small` et `mini`.
```html
<div class="demo-input-size">
<el-input
placeholder="Entrez quelque chose"
v-model="input1">
</el-input>
<el-input
size="medium"
placeholder="Entrez quelque chose"
v-model="input2">
</el-input>
<el-input
size="small"
placeholder="Entrez quelque chose"
v-model="input3">
</el-input>
<el-input
size="mini"
placeholder="Entrez quelque chose"
v-model="input4">
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>
```
:::
### Autocomplétion
Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.
:::demo Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut `fetch-suggestions` est une méthode qui retourne les suggestions. Dans cet exemple, `querySearch(queryString, cb)` renvoie des suggestions à l'autocomplétion via `cb(data)` quand elles sont prêtes.
```html
<el-row class="demo-autocomplete">
<el-col :span="12">
<div class="sub-title">Liste des suggestions au focus</div>
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="Entrez quelque chose"
@select="handleSelect"
></el-autocomplete>
</el-col>
<el-col :span="12">
<div class="sub-title">Liste des suggestions à l'écriture</div>
<el-autocomplete
class="inline-input"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="Entrez quelque chose"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
</el-col>
</el-row>
<script>
export default {
data() {
return {
links: [],
state1: '',
state2: ''
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
// call callback function to return suggestions
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
}
</script>
```
:::
### Template personnalisé
Vous pouvez personnaliser la manière dont les suggestions sont affichées.
:::demo Utilisez `scoped slot` pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé `item`.
```html
<el-autocomplete
popper-class="my-autocomplete"
v-model="state"
:fetch-suggestions="querySearch"
placeholder="Entrez quelque chose"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
<style>
.my-autocomplete {
li {
line-height: normal;
padding: 7px;
.value {
text-overflow: ellipsis;
overflow: hidden;
}
.link {
font-size: 12px;
color: #b4b4b4;
}
}
}
</style>
<script>
export default {
data() {
return {
links: [],
state: ''
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
// call callback function to return suggestion objects
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
},
mounted() {
this.links = this.loadAll();
}
}
</script>
```
:::
### Recherche distante
Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
:::demo
```html
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="Entrez quelque chose"
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
links: [],
state: '',
timeout: null
};
},
methods: {
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
querySearchAsync(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
};
</script>
```
:::
### Taille limite
:::demo `maxlength` et `minlength` sont des attributs natifs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez `maxlength`, vous pourrez montrer le nombre de caractères en mettant `show-word-limit` à `true`.
```html
<el-input
type="text"
placeholder="Please input"
v-model="text"
maxlength="10"
show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
placeholder="Please input"
v-model="textarea"
maxlength="30"
show-word-limit
>
</el-input>
<script>
export default {
data() {
return {
text: '',
textarea: ''
}
}
}
</script>
```
:::
### Attributs de l'Input
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| ----| ----| ----| ---- | ----- |
| type| Type de l'input. | string | text, textarea et autres [types d'input natifs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| value / v-model | Variable liée. | string / number | — | — |
| maxlength| Identique à `maxlength` dans l'input natif. | number| — | — |
| minlength| Identique à `minlength` dans l'input natif. | number | — | — |
| show-word-limit | Affiche le nombre de caractères restant， ne marche que lorsque `type` est 'text' ou 'textarea'. | boolean | — | false |
| placeholder| Placeholder de l' Input. | string | — | — |
| clearable | Si le bouton de reset apparaît. | boolean | — | false |
| show-password | Si le champ doit un champ de mot de passe avec bouton de visualisation. | boolean | — | false |
| disabled | Si le champ est désactivé. | boolean | — | false |
| size | Taille du champ, marche quand `type` n'est pas 'textarea'. | string | medium / small / mini | — |
| prefix-icon | Classe de l'icône de préfixe. | string | — | — |
| suffix-icon | Classe de l'iĉone de suffixe. | string | — | — |
| rows | Nombre de ligne pour une zone de texte, ne marche que si `type` est 'textarea'. | number | — | 2 |
| autosize | Si la zone de texte à une hauteur adaptative, ne marche que si `type` est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | Identique à `autocomplete` dans l'input natif. | string | on / off | off |
| auto-complete | @DEPRECATED dans la prochaine version majeure. | string | on/off | off |
| name | Identique à `name` dans l'input natif. | string | — | — |
| readonly | Identique à `readonly` dans l'input natif. | boolean | — | false |
| max | Identique à `max` dans l'input natif. | — | — | — |
| min | Identique à `min` dans l'input natif. | — | — | — |
| step| Identique à `step` dans l'input natif. | — | — | — |
| resize| Contrôle les changements de taille autorisés. | string | none, both, horizontal, vertical | — |
| autofocus | Identique à `autofocus` dans l'input natif. | boolean | — | false |
| form | Identique à `form` dans l'input natif. | string | — | — |
| label | Texte du label. | string | — | — |
| tabindex | tabindex de l'input. | string | - | - |
| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
### Slots de l'Input
| Nom | Description |
|------|--------|
| prefix | Contenu du préfixe, ne marche que si `type` est 'text'. |
| suffix | Contenu du suffixe, ne marche que si `type` est 'text'. |
| prepend | Contenu à ajouter avant l'Input, ne marche que si `type` est 'text'. |
| append | Contenu à ajouter après l'Input, ne marche que si `type` est 'text'. |
### Évènements
| Nom | Description | Paramètres |
|----| ----| ----|
| blur | Se déclenche quand Input perds le focus. | (event: Event) |
| focus | Se déclenche quand Input a le focus. | (event: Event) |
| change | Se déclenche quand la valeur change. | (value: string \ number) |
| change | Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée. | (value: string \| number) |
| input | Déclenché lorsque la valeur d'entrée change. | (value: string \| number) |
| clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |
### Méthodes de l'Input
| Méthode | Description | Paramètres |
|------|--------|-------|
| focus | Met le focus sur le champ. | — |
| blur | Retire le focus de le champ. | — |
| select | Sélectionne le texte du champ. | — |
### Attributs de l'autocomplétion
| Attribut | Description | Type | Options | Défaut |
|----| ----| ----| ---- | -----|
| placeholder| Le placeholder de l'autocomplétion. | string | — | — |
| clearable | Si un bouton d'effacement doit apparaître. | boolean | — | false |
| disabled | Si l'autocomplétion est déactivée. | boolean | — | false|
| value-key | Nom de la clé de l'objet suggestion pour l'affichage. | string | — | value |
| icon | Nom de l'icône. | string | — | — |
| value | Variable liée. | string | — | — |
| debounce | Délai d'attente après écriture, en millisecondes. | number | — | 300 |
| placement | Emplacement du menu popup. | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
| fetch-suggestions | La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle `callback(data:[])` pour les renvoyer à l'autocomplétion. | Function(queryString, callback) | — | — |
| popper-class | Nom de classe pour le menu de l'autocomplétion. | string | — | — |
| trigger-on-focus | Si les suggestions doivent apparaître quand l'input a le focus. | boolean | — | true |
| name | Identique à `name` dans l'input natif. | string | — | — |
| select-when-unmatched | Si un évènement `select` doit être émis après pression sur entrée quand il n'y a pas de résultats. | boolean | — | false |
| label | Texte du label. | string | — | — |
| prefix-icon | Classe de l'icône de préfixe. | string | — | — |
| suffix-icon | Classe de l'iĉone de suffixe. | string | — | — |
| hide-loading | Si l'icône de chargement doit être cachée dans le cas d'une recherche distante. | boolean | — | false |
| popper-append-to-body | Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à `false`. | boolean | - | true |
| highlight-first-item | Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut. | boolean | — | false |
### Slots de l'autocomplétion
| Nom | Description |
|------|--------|
| prefix | Contenu du préfixe. |
| suffix | Contenu du suffixe. |
| prepend | Contenu à ajouter avant le champ. |
| append | Contenu à ajouter après le champ. |
### Template personnalisé pour l'autocomplétion
| Nom | Description |
|------|--------|
| — | Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }. |
### Évènements de l'autocomplétion
| Nom | Description | Paramètres |
|----| ----| ----|
| select | Se déclenche quand une suggestion est cliquée. | La suggestion sélectionnée. |
| change | Se déclenche quand la valeur change. | (value: string \ number) |
### Méthodes de l'autocomplétion
| Méthode | Description | Paramètres |
|------|--------|-------|
| focus | Met le focus sur l'élément. | — |

35
examples/docs/fr-FR/installation.md Normal file
View File

@@ -0,0 +1,35 @@
## Installation
### NPM
Installer Element via npm est recommandé, il fonctionne parfaitement avec [webpack](https://webpack.js.org/).
```shell
npm i element-ui -S
```
### CDN
Obtenez la dernière version via [unpkg.com/element-ui](https://unpkg.com/element-ui/), et importez le JavaScript et le CSS dans votre page.
```html
<!-- import du CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import du JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
:::tip
Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. Référez-vous à [unpkg.com](https://unpkg.com) pour plus d'informations.
:::
### Hello world
Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/ziyoung/pen/rRKYpd)).
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).

357
examples/docs/fr-FR/layout.md Normal file
View File

@@ -0,0 +1,357 @@
## Layout
Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.
### Mise en page basique
Créez une grille de mise en page basique grâce aux colonnes.
:::demo Grâce à `row` et `col`, vous pouvez arranger la mise en page en utilisant l'attribut `span`.
```html
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
```
:::
### Espacement
L'espacement entre colonnes est configurable.
:::demo Utilisez l'attribut `gutter` dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.
```html
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
```
:::
### Mise en page complexe
Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.
:::demo
```html
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
```
:::
### Décalage des colonnes
Vous pouvez spécifier un décalage pour les colonnes.
:::demo Utiliser l'attribut `offset` pour régler le décalage.
```html
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
```
:::
### Alignement
Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible.
:::demo Vous pouvez activer la mise en page flex en réglant l'attribut `type` à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut `justify` définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.
```html
<el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
```
:::
### Mise en page responsive
Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.
:::demo
```html
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<style>
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
```
:::
### Classes pour cacher certains éléments
Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:
```js
import 'element-ui/lib/theme-chalk/display.css';
```
Ces classes sont:
- `hidden-xs-only` - disparaît sur les très petits viewports uniquement
- `hidden-sm-only` - disparaît sur les petits viewports uniquement
- `hidden-sm-and-down` - disparaît sur les petits viewports et plus petits
- `hidden-sm-and-up` - disparaît sur les petits viewports et plus grand
- `hidden-md-only` - disparaît sur les viewports moyens uniquement
- `hidden-md-and-down` - disparaît sur les viewports moyens et plus petits
- `hidden-md-and-up` - disparaît sur les viewports moyens et plus grand
- `hidden-lg-only` - disparaît sur les viewports larges uniquement
- `hidden-lg-and-down` - disparaît sur les viewports larges et plus petits
- `hidden-lg-and-up` - disparaît sur les viewports larges et plus grand
- `hidden-xl-only` - disparaît sur les viewports très larges uniquement
### Attributs des lignes
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| gutter | Espacement de la grille. | number | — | 0 |
| type | Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes. | string | — | — |
| justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start |
| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | top |
| tag | Élément de tag personnalisé. | string | * | div |
### Attributs des colonnes
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| span | Nombre de colonnes sur lesquelles l'élément s'étend. | number | — | 24 |
| offset | Nombre d'espacements sur la gauche de l'élément. | number | — | 0 |
| push | Nombre de colonnes dont l'élément se déplace vers la droite. | number | — | 0 |
| pull | Nombre de colonnes dont l'élément se déplace vers la gauche. | number | — | 0 |
| xs | `<768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | Élément de tag personnalisé. | string | * | div |

81
examples/docs/fr-FR/link.md Normal file
View File

@@ -0,0 +1,81 @@
## Link
Un hyperlien textuel.
### Usage basique
Lien texte basique.
:::demo
```html
<div>
<el-link href="https://element.eleme.io" target="_blank">défaut</el-link>
<el-link type="primary">primaire</el-link>
<el-link type="success">succès</el-link>
<el-link type="warning">avertissement</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>
</div>
```
:::
### Désactivé
Lien désactivé.
:::demo
```html
<div>
<el-link disabled>défaut</el-link>
<el-link type="primary" disabled>primaire</el-link>
<el-link type="success" disabled>succès</el-link>
<el-link type="warning" disabled>avertissement</el-link>
<el-link type="danger" disabled>danger</el-link>
<el-link type="info" disabled>info</el-link>
</div>
```
:::
### Souligné
Lien souligné.
:::demo
```html
<div>
<el-link :underline="false">non souligné</el-link>
<el-link>Souligné</el-link>
</div>
```
:::
### Icône
Lien avec icône.
:::demo
```html
<div>
<el-link icon="el-icon-edit">Éditer</el-link>
<el-link>Vérifier<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
```
:::
### Attributs
| Attribut | Description | Type | Options | Défaut |
| --------- | ------------------------------- | ------- | ------------------------------------------- | ------- |
| type | Type du lien. | string | primary / success / warning / danger / info | défaut |
| underline | Si le composant est souligné. | boolean | — | true |
| disabled | Si le composant est désactivé. | boolean | — | false |
| href | Identique au `href` natif. | string | — | - |
| icon | Nom de classe de l'icône. | string | — | - |

218
examples/docs/fr-FR/loading.md Normal file
View File

@@ -0,0 +1,218 @@
## Loading
Affiche une animation durant le chargement de données.
### Loading dans un conteneur
Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.
:::demo Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive `v-loading`, attachez simplement un `boolean`. Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur `body` pour ajouter le masque à l'élément body.
```html
<template>
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Nom"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Adresse">
</el-table-column>
</el-table>
</template>
<style>
body {
margin: 0;
}
</style>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
loading: true
};
}
};
</script>
```
:::
### Personnalisation
Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
:::demo Ajoutez l'attribut `element-loading-text` à l'élement sur lequel `v-loading` est attaché et sa valeur sera affichée sous le spinner. De la même façon, `element-loading-spinner` et `element-loading-background` permettent de personnaliser le spinner et la couleur de fond.
```html
<template>
<el-table
v-loading="loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Nom"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Adresse">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
loading: true
};
}
};
</script>
```
:::
### Chargement plein écran
Affichez une animation en plein écran quand vous charger des données.
:::demo Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur `fullscreen` qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur `lock`. Quand il est utilisé comme service, Loading est en plein écran par défaut.
```html
<template>
<el-button
type="primary"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
Comme directive
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
Comme service
</el-button>
</template>
<script>
export default {
data() {
return {
fullscreenLoading: false
}
},
methods: {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
</script>
```
:::
### Service
Vous pouvez invoquer Loading comme un service. Importez le service Loading:
```javascript
import { Loading } from 'element-ui';
```
Et invoquer-le:
```javascript
Loading.service(options);
```
Le paramètre `options` correspond à la configuration de Loading (voir table suivante). `LoadingService` retourne une instance de Loading, que vous pouvez fermer en appelant la méthode `close`:
```javascript
let loadingInstance = Loading.service(options);
this.$nextTick(() => { // Loading should be closed asynchronously
loadingInstance.close();
});
```
Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:
```javascript
let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true
```
Appeler la méthode `close` sur n'importe lequel des deux fermera le Loading.
Si Element est importé en entier, une méthode globale `$loading` sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: `this.$loading(options)` et elle retournera une instance Loading.
### Options
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| target | L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à `document.querySelector` Pour avoir l'élément du DOM correspondant. | object/string | — | document.body |
| body | Identique au modificateur `body` de `v-loading`. | boolean | — | false |
| fullscreen | Identique au modificateur `fullscreen` de `v-loading`. | boolean | — | true |
| lock | Identique au modificateur `lock` de `v-loading`. | boolean | — | false |
| text | Texte a afficher sous le spinner. | string | — | — |
| spinner | Classe du spinner. | string | — | — |
| background | Couleur de fond du masque. | string | — | — |
| customClass | Classe du Loading. | string | — | — |

305
examples/docs/fr-FR/menu.md Normal file
View File

@@ -0,0 +1,305 @@
## NavMenu
Menu qui fournit un système de navigation à votre site.
### Barre du haut
La barre du haut peut être utilisée pour différents scénarios.
:::demo Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut `mode` sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises `background-color`, `text-color` et `active-text-color` pour personnaliser les couleurs.
```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Centre de traitement</el-menu-item>
<el-submenu index="2">
<template slot="title">Lieu de travail</template>
<el-menu-item index="2-1">item un</el-menu-item>
<el-menu-item index="2-2">item deux</el-menu-item>
<el-menu-item index="2-3">item trois</el-menu-item>
<el-submenu index="2-4">
<template slot="title">item quatre</template>
<el-menu-item index="2-4-1">item un</el-menu-item>
<el-menu-item index="2-4-2">item deux</el-menu-item>
<el-menu-item index="2-4-3">item trois</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>Infos</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">Centre de traitement</el-menu-item>
<el-submenu index="2">
<template slot="title">Lieu de travail</template>
<el-menu-item index="2-1">item un</el-menu-item>
<el-menu-item index="2-2">item deux</el-menu-item>
<el-menu-item index="2-3">item trois</el-menu-item>
<el-submenu index="2-4">
<template slot="title">item quatre</template>
<el-menu-item index="2-4-1">item un</el-menu-item>
<el-menu-item index="2-4-2">item deux</el-menu-item>
<el-menu-item index="2-4-3">item trois</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>
</el-menu>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
```
:::
### Barre latérale
Menu vertical avec sous-menus.
:::demo Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.
```html
<el-row class="tac">
<el-col :span="12">
<h5>Couleurs par défaut</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>Navigateur Un</span>
</template>
<el-menu-item-group title="Group Un">
<el-menu-item index="1-1">item un</el-menu-item>
<el-menu-item index="1-2">item un</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Deux">
<el-menu-item index="1-3">item trois</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">item quatre</template>
<el-menu-item index="1-4-1">item un</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigateur Deux</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span>Navigateur Trois</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigateur Quatre</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="12">
<h5>Couleurs personnalisées</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>Navigateur Un</span>
</template>
<el-menu-item-group title="Group Un">
<el-menu-item index="1-1">item un</el-menu-item>
<el-menu-item index="1-2">item un</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Deux">
<el-menu-item index="1-3">item trois</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">item quatre</template>
<el-menu-item index="1-4-1">item un</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigateur Deux</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span>Navigateur Trois</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigateur Quatre</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
```
:::
### Menu réduit
Le menu vertical peut être réduit.
:::demo
```html
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">Agrandir</el-radio-button>
<el-radio-button :label="true">Réduire</el-radio-button>
</el-radio-group>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">Navigateur Un</span>
</template>
<el-menu-item-group>
<span slot="title">Group Un</span>
<el-menu-item index="1-1">item un</el-menu-item>
<el-menu-item index="1-2">item deux</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Deux">
<el-menu-item index="1-3">item trois</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">item quatre</span>
<el-menu-item index="1-4-1">item un</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">Navigateur Deux</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">Navigateur Trois</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">Navigateur Quatre</span>
</el-menu-item>
</el-menu>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data() {
return {
isCollapse: true
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
```
:::
### Attributs du menu
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| mode | Mode d'affichage du menu. | string | horizontal / vertical | vertical |
| collapse | Si le menu peut être réduit, uniquement disponible en mode vertical. | boolean | — | false |
| background-color | Couleur de fond du menu (format hexadécimal). | string | — | #ffffff |
| text-color | Couleur du texte du menu (format hexadécimal) | string | — | #303133 |
| active-text-color | Couleur du texte de l'item actif (format hexadécimal). | string | — | #409EFF |
| default-active | Index du menu actif. | string | — | — |
| default-openeds | Liste contenant les index les sous-menus actifs. | Array | — | — |
| unique-opened | Si un seul sous-menu peut être actif. | boolean | — | false |
| menu-trigger | Comment les sous-menu sont déclenchés, uniquement en mode horizontal. | string | hover / click | hover |
| router | Si le mode `vue-router` est activé. Si `true`, l'index sera utilisé comme 'path' pour activer la route. | boolean | — | false |
| collapse-transition | Si la transition de réduction doit être activée. | boolean | — | true |
### Méthodes du menu
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| open | Ouvre un sous-menu spécifique. | index: index du sous-menu à ouvrir |
| close | Ferme un sous-menu spécifique. | index: index du sous-menu à fermer |
### Évènements du menu
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| select | Fonction de callback pour quand le menu est activé. | index: index du menu activé, indexPath: index path du menu activé. |
| open | Fonction de callback pour quand le sous-menu s'agrandit. | index: index of expanded sous-menu, indexPath: index path du sous-menu |
| close | Fonction de callback pour quand le sous-menu se réduit. | index: index of collapsed sous-menu, indexPath: index path du sous-menu |
### Évènements des items du menu
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| click | Fonction de callback pour quand le menu-item est cliqué. | el: instance du menu-item. |
### Attributs du sous-menu
| Attributs | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| index | Identificateur unique. | string | — | — |
| popper-class | Classe du menu popup. | string | — | — |
| show-timeout | Délai avant de montrer un sous-menu. | number | — | 300 |
| hide-timeout | Délai avant de cacher un sous-menu. | number | — | 300 |
| disabled | Si le sous-menu est désactivé. | boolean | — | false |
| popper-append-to-body | S'il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété. | boolean | - | Sous-menus de niveau 1: true / autres sous-menus: false |
### Attributs des items du menu
| Attributs | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| index | Identificateur unique. | string/null | — | null |
| route | Objet Vue Router. | object | — | — |
| disabled | Si l'item est désactivé. | boolean | — | false |
### Attributs des groupes
| Attributs | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| title | Titre du groupe. | string | — | — |

330
examples/docs/fr-FR/message-box.md Normal file
View File

@@ -0,0 +1,330 @@
## MessageBox
Un ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.
:::tip
MessageBox est avant tout conçue pour émuler des `alert`, `confirm` ou `prompt`, son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.
:::
### Alert
Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.
:::demo Ouvrez un alert en appelant la méthode `$alert`. Elle simule une `alert` système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres `message` et `title` sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet `Promise`. Si vous n'êtes pas certains que tout vos navigateurs cibles supportent `Promise`, utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.
```html
<template>
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('Ceci est un message', 'Titre', {
confirmButtonText: 'OK',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
</script>
```
:::
### Confirm
Confirm est utilisé pour demander une confirmation à l'utilisateur.
:::demo Appelez la méthode `$confirm` pour ouvrir une confirm, qui simule le `confirm` système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut `options`. L'attribut `type` indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut `title` doit être de type `string`. S'il se trouve être un `object`, il sera considéré comme étant l'attribut `options`. Cet exemple utilise une `Promise` pour gérer la suite du processus.
```html
<template>
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: 'Fichier supprimé'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Suppression annulée'
});
});
}
}
}
</script>
```
:::
### Prompt
Prompt est utilisé lorsqu'un utilisateur.
:::demo Appellez la méthode `$prompt` pour ouvrir un prompt simulant le `prompt` système. Vous pouvez utiliser le paramètre `inputPattern` pour spécifier un pattern à l'aide d'une RegExp. Utilisez `inputValidator` pour indiquer la méthode de validation, qui devra retourner un `Boolean` ou un `String`. Retourner `false` ou un `String` veut dire que la validation a échouée, et la string ainsi fournie sera le `inputErrorMessage`. De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre `inputPlaceholder`.
```html
<template>
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$prompt('Entrez votre e-mail', 'Astuce', {
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: 'E-mail invalide'
}).then(({ value }) => {
this.$message({
type: 'success',
message: 'Votre e-mail est: ' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Annulé'
});
});
}
}
}
</script>
```
:::
### Personnalisation
Il est possible d'afficher du contenu un peu plus varié et personnalisé.
:::demo les trois précédentes méthodes sont des repackagings de la méthode `$msgbox`. cet exemple appelle directement `$msgbox` en utilisant l'attribut `showCancelButton` pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser `cancelButtonClass` pour ajouter du style et `cancelButtonText` pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode `beforeClose`est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: `action`, `instance` et `done`. Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer `loading` pour le bouton de confirmation. Appelez `done` pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.
```html
<template>
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>
<script>
export default {
methods: {
open() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Le message peut être '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = 'Chargement...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'Action: ' + action
});
});
},
}
}
</script>
```
:::
:::tip
Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau `VNode` avec l'ancien `VNode`, puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ([#8931](https://github.com/ElemeFE/element/issues/8931)). Dans ce cas, Vous pouvez ajouter une clé unique à `VNode` à chaque fois que MessageBox s'ouvre: [exemple](https://jsfiddle.net/zhiyang/ezmhq2ef).
:::
### Utiliser du HTML
`message` supporte le HTML.
:::demo Mettez `dangerouslyUseHTMLString` à `true` et `message` sera traité comme du HTML.
```html
<template>
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
dangerouslyUseHTMLString: true
});
}
}
}
</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](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.
:::
### Distinguer 'annuler' de 'fermer'
Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.
:::demo Par défaut, le paramètre de la `callback` et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si `distinguishCancelAndClose` est à `true`, le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.
```html
<template>
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Enregistrer',
cancelButtonText: 'Ne pas enregistrer'
})
.then(() => {
this.$message({
type: 'info',
message: 'Enregistré. Passage a une nouvelle route.'
});
})
.catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? 'Changements annulés. Passage sur une nouvelle route.'
: 'Reste sur la même route'
})
});
}
}
}
</script>
```
:::
### Contenu centré
le contenu de MessageBox peut être centré.
:::demo Mettre `center` à `true` centrera le contenu
```html
<template>
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: 'Fichier supprimé'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Annulé'
});
});
}
}
}
</script>
```
:::
### Méthode globale
Si Element est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: `$msgbox`, `$alert`, `$confirm` et `$prompt`. Dans ce cas vous pouvez appeler `MessageBox` comme nous l'avons fait dans cette page. Les paramètres sont:
- `$msgbox(options)`
- `$alert(message, title, options)` ou `$alert(message, options)`
- `$confirm(message, title, options)` ou `$confirm(message, options)`
- `$prompt(message, title, options)` ou `$prompt(message, options)`
### Import à la demande
Si vous préférer importer `MessageBox` à la demande:
```javascript
import { MessageBox } from 'element-ui';
```
Les méthodes correspondantes sont: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` et `MessageBox.prompt`. Les paramètres sont les mêmes que précédemment.
### Options
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | Titre de la MessageBox. | string | — | — |
| message | Contenu de la MessageBox. | string | — | — |
| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |
| type | Type du message, utilisé pour le choix d'icône. | string | success / info / warning / error | — |
| iconClass | Classe d'icône personnalisée, écrase `type`. | string | — | — |
| customClass | Nom de classe pour MessageBox. | string | — | — |
| callback | La callback de fermeture de MessageBox si vous n'utilisez pas les promesses. | function(action, instance), ou `action` peut être 'confirm', 'cancel' ou 'close', et `instance` est l'instance MessageBox. | — | — |
| showClose | Si l'icône de fermeture doit être affichée. | boolean | — | true |
| beforeClose | La callback de pré-fermeture qui empèchera MessageBox de se fermer. | function(action, instance, done), ou `action` peut-être 'confirm', 'cancel' ou 'close'; `instance` est l'instance de MessageBox; `done` est la méthode pour fermer l'instance. | — | — |
| distinguishCancelAndClose | S'il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox. | boolean | — | false |
| lockScroll | Si le défilement de la page doit être bloqué lorsque la MessageBox est active. | boolean | — | true |
| showCancelButton | Si le bouton annuler doit être affiché. | boolean | — | false (true dans le cas de confirm ou prompt). |
| showConfirmButton | Si le bouton confirmer doit être affiché. | boolean | — | true |
| cancelButtonText | Le texte du bouton annuler. | string | — | Cancel |
| confirmButtonText | Le texte du bouton confirmer. | string | — | OK |
| cancelButtonClass | Classe du bouton annuler. | string | — | — |
| confirmButtonClass | Classe du bouton confirmer. | string | — | — |
| closeOnClickModal | Si MessageBox peut être fermée en cliquant en dehors. | boolean | — | true (false dans le cas de alert). |
| closeOnPressEscape | Si MessageBox peut être fermée en pressant ESC. | boolean | — | true (false dans le cas de alert) |
| closeOnHashChange | Si MessageBox doit être fermée quand le hash change. | boolean | — | true |
| showInput | Si un champs d'input doit être affiché. | boolean | — | false (true dans le cas de prompt). |
| inputPlaceholder | Placeholder du champs d'input. | string | — | — |
| inputType | Type du champs d'input. | string | — | text |
| inputValue | Valeur initiale du champs d'input. | string | — | — |
| inputPattern | RegExp du champs d'input. | regexp | — | — |
| inputValidator | Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage. | function | — | — |
| inputErrorMessage | Message d'erreur lorsque la validation échoue. | string | — | Illegal input |
| center | Si le contenu doit être centré. | boolean | — | false |
| roundButton | Si le bouton doit être rond. | boolean | — | false |

224
examples/docs/fr-FR/message.md Normal file
View File

@@ -0,0 +1,224 @@
## Message
Utilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce dernier est surtout utilisé pour afficher des notifications système passives.
### Usage
S'affiche en haut de la page et disparaît après trois secondes.
:::demo L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element affecte la méthode `$message` pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.
```html
<template>
<el-button :plain="true" @click="open">Afficher le message</el-button>
<el-button :plain="true" @click="openVn">VNode</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$message('Ceci est un message.');
},
openVn() {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('span', null, 'Message peut être '),
h('i', { style: 'color: teal' }, 'VNode')
])
});
}
}
}
</script>
```
:::
### Types
Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
:::demo Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre `type` définit différents types, son défaut étant `info`. Dans ce cas le body est passé comme valeur de `message`. De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété `type` comme dans `open4`.
```html
<template>
<el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open4">error</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$message('Ceci est un message.');
},
open2() {
this.$message({
message: 'Félicitations, ceci est un message de succès.',
type: 'success'
});
},
open3() {
this.$message({
message: 'Attention, ceci est un avertissement.',
type: 'warning'
});
},
open4() {
this.$message.error('Ouups, ceci est une erreur.');
}
}
}
</script>
```
:::
### Fermeture
Un bouton de fermeture peut être ajouté.
:::demo Un Message ne peut être fermé par défaut. Utiliséez `showClose` si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une `duration` réglable. La durée par défaut est de 3000 ms, et infinie si à `0`.
```html
<template>
<el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open4">error</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$message({
showClose: true,
message: 'Ceci est un message.'
});
},
open2() {
this.$message({
showClose: true,
message: 'Félicitations, ceci est un message de succès.',
type: 'success'
});
},
open3() {
this.$message({
showClose: true,
message: 'Attention, ceci est un avertissement.',
type: 'warning'
});
},
open4() {
this.$message({
showClose: true,
message: 'Ouups, ceci est une erreur.',
type: 'error'
});
}
}
}
</script>
```
:::
### Texte centré
Utilisez l'attribut `center` pour centrer le texte.
:::demo
```html
<template>
<el-button :plain="true" @click="openCenter">Texte centré</el-button>
</template>
<script>
export default {
methods: {
openCenter() {
this.$message({
message: 'Texte centré',
center: true
});
}
}
}
</script>
```
:::
### Utiliser du HTML
`message` supporte le HTML.
:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.
```html
<template>
<el-button :plain="true" @click="openHTML">Utiliser du HTML</el-button>
</template>
<script>
export default {
methods: {
openHTML() {
this.$message({
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](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.
:::
### Méthode globale
Element ajoute une méthode `$message` à Vue.prototype. Vous pouvez donc appeler `Message` dans l'instance de Vue comme dans cette page.
### Import à la demande
Importez `Message`:
```javascript
import { Message } from 'element-ui';
```
Dans ce cas il faudra appeler `Message(options)`. Les méthodes des différents types sont aussi ajoutées, e.g. `Message.success(options)`. Vous pouvez appeler `Message.closeAll()` pour fermer manuellement toutes les instances.
### Options
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | Texte du message. | string / VNode | — | — |
| type | Type du message. | string | success/warning/info/error | info |
| iconClass | Classe de l'icône, écrase `type`. | string | — | — |
| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |
| customClass | Nom de classe pour Message. | string | — | — |
| duration | La durée d'affichage, en millisecondes. Si 0, la durée est infinie. | number | — | 3000 |
| showClose | Si un bouton de fermeture doit être affiché. | boolean | — | false |
| center | Si le texte doit être centré. | boolean | — | false |
| onClose | Callback de fermeture avec en paramètre l'instance de Message. | function | — | — |
| offset | set the distance to the top of viewport | number | — | 20 |
### Méthodes
`Message` et `this.$message` retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode `close`.
| Méthode | Description |
| ---- | ---- |
| close | Ferme l'instance de Message. |

316
examples/docs/fr-FR/notification.md Normal file
View File

@@ -0,0 +1,316 @@
## 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 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>
export default {
methods: {
open1() {
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
Nous fournissons quatre types: succès, avertissement, information et erreur.
:::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 `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>
```
:::
### 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>
```
:::
### 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>
```
:::
### 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>
```
:::
:::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>
```
:::
### 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`:
```javascript
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. |

39
examples/docs/fr-FR/page-header.md Normal file
View File

@@ -0,0 +1,39 @@
## PageHeader
Si le chemin de la page est simple, il est recommandé d’utiliser PageHeader au lieu de Breadcrumb.
### Basic
:::demo
```html
<el-page-header @back="goBack" content="detail">
</el-page-header>
<script>
export default {
methods: {
goBack() {
console.log('go back');
}
}
}
</script>
```
:::
### Attributes
| Attribute | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |------------------------------ | ------ |
| title | titre principal | string | — | Back |
| content | contenu | string | — | — |
### Events
| Event Name | Description | Parameters |
|----------- |-------------- |----------- |
| back | se déclenche lorsque vous cliquez sur le côté droit | — |
### Slots
| slot | Description |
|---------- | ---------------------- |
| title | contenu du titre |
| content | contenu |

207
examples/docs/fr-FR/pagination.md Normal file
View File

@@ -0,0 +1,207 @@
## Pagination
Si vous avez beaucoup de données à afficher sur une seule page, il est préférable d'utiliser une pagination.
### Usage
:::demo Configurez `layout` avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: `prev` (pour aller vers la page précédente), `next` (pour aller vers la page suivante), `pager` (liste des pages), `jumper` (un champ pour aller directement à une page précise), `total` (Le nombre total d'entrées), `size` (un sélecteur qui détermine la taille de la page) et `->`(chaque élément après celui-ci sera poussé vers la droite).
```html
<div class="block">
<span class="demonstration">Quand vous avez quelques pages</span>
<el-pagination
layout="prev, pager, next"
:total="50">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">Quand vous avez plus que 7 pages</span>
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
```
:::
### Nombre de pages
:::demo Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut `pager-count`.
```html
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
:::
### Boutons avec couleur de fond
:::demo Réglez l'attribut `background` pour change la couleur de fond des boutons.
```html
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
:::
### Petite pagination
Utilisez une pagination de taille réduite si vous manquez d'espace.
:::demo Ajoutez simplement l'attribut `small` et la pagination sera de taille réduite.
```html
<el-pagination
small
layout="prev, pager, next"
:total="50">
</el-pagination>
```
:::
### Plus d'éléments
Vous pouvez ajouter plus de modules suivant vos besoins.
:::demo Cet exemple contient un use-case complet. Il utilise les évènements `size-change` et `current-change` pour gérer la taille de la page et son changement. `page-sizes` accepte un tableau d'entiers, chacun représentant une taille dans les options de `sizes`, e.g. `[100, 200, 300, 400]` indique que le sélecteur aura quatre options: 100, 200, 300 ou 400 entrées par page.
```html
<template>
<div class="block">
<span class="demonstration">Total d'entrées</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="100"
layout="total, prev, pager, next"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">Changement de taille de la page</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage2"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="sizes, prev, pager, next"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">Aller à</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage3"
:page-size="100"
layout="prev, pager, next, jumper"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">Tous en même temps</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`${val} items per page`);
},
handleCurrentChange(val) {
console.log(`current page: ${val}`);
}
},
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4
};
}
}
</script>
```
:::
### Cacher la pagination s'il n'y a qu'une seule page
Lorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec l'attribut `hide-on-single-page`.
:::demo
```html
<div>
<el-switch v-model="value">
</el-switch>
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next">
</el-pagination>
</div>
<script>
export default {
data() {
return {
value: false
}
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | Si la pagination doit être petite. | boolean | — | false |
| background | Si les boutons doivent avoir une couleur de fond. | boolean | — | false |
| page-size | Nombre d'entrées sur chaque page, supporte le modificateur .sync. | number | — | 10 |
| total | Nombre total d'entrées. | number | — | — |
| page-count | Nombre de pages. Réglez `total` ou `page-count` et le nombre de pages sera affiché; si vous avez besoin de `page-sizes`, `total` est requis. | number | — | — |
| pager-count | Nombre de sélecteurs de pages. Pagination se réduit lorsque le nombre de pages dépasse cette valeur. | number | Nombre impair entre 5 et 21. | 7 |
| current-page | Le numéro de page courant, supporte le modificateur .sync. | number | — | 1 |
| layout | L'ensemble des éléments de la pagination, séparés par des virgules. | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | Options pour la taille des pages. | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | Classe du menu de sélection de la taille des pages. | string | — | — |
| prev-text | Texte du bouton prev. | string | — | — |
| next-text | Texte du bouton next. | string | — | — |
| disabled | Si la pagination est désactivée. | boolean | — | false |
| hide-on-single-page | Si la pagination doit être cachée quand il n'y a qu'une seule page. | boolean | — | - |
### Évènements
| Nom | Description | Paramètres |
|---------|--------|---------|
| size-change | Se déclenche quand `page-size` change. | La nouvelle taille. |
| current-change | Se déclenche quand `current-page` change. | La nouvelle page courante |
| prev-click | Se déclenche quand le bouton prev est cliqué et que la page courante change. | La nouvelle page courante. |
| next-click | Se déclenche quand le bouton next est cliqué et que la page courante change. | La nouvelle page courante. |
### Slot
| Name | Description |
| --- | --- |
| — | Contenu personnalisé. Pour l'utiliser vous devez déclarer `slot` dans `layout`. |

60
examples/docs/fr-FR/popconfirm.md Normal file
View File

@@ -0,0 +1,60 @@
## Popconfirm
A simple confirmation dialog of an element click action.
### Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
````
:::
### Customise
You can customise Popconfirm like:
:::demo
```html
<template>
<el-popconfirm
confirm-button-text='OK'
cancel-button-text='No, Thanks'
icon="el-icon-info"
icon-color="red"
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | Title | String | — | — |
| confirm-button-text | Confirm button text | String | — | — |
| cancel-button-text | Cancel button text | String | — | — |
| confirm-button-type | Confirm button type | String | — | Primary |
| cancel-button-type | Cancel button type | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| icon-color | Icon color | String | — | #f90 |
| hide-icon | is hide Icon | Boolean | — | false |
### Slot
| Name | Description |
|--- | ---|
| reference | HTML element that triggers Popconfirm |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| confirm | triggers when click confirm button | — |
| cancel | triggers when click cancel button | — |

173
examples/docs/fr-FR/popover.md Normal file
View File

@@ -0,0 +1,173 @@
## Popover
### Usage
Similaire à Tooltip, Popover est aussi construit avec `Vue-popper`. Certains attributs sont donc les mêmes, vous pourrez vous référer à la documentation de Tooltip pour certains d'entre eux.
:::demo L'attribut `trigger` détermine comment le popover se déclenche: `hover`, `click`, `focus` ou `manual`. Concernant l'élément déclencheur, vous pouvez l'écrire de deux manières: en utilisant le slot `slot="reference"` ou bien la directive `v-popover` avec `ref` égal à popover.
```html
<template>
<el-popover
placement="top-start"
title="Title"
width="200"
trigger="hover"
content="this is content, this is content, this is content">
<el-button slot="reference">S'active au passage du curseur</el-button>
</el-popover>
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="click"
content="this is content, this is content, this is content">
<el-button slot="reference">S'active en cliquant</el-button>
</el-popover>
<el-popover
ref="popover"
placement="right"
title="Title"
width="200"
trigger="focus"
content="this is content, this is content, this is content">
</el-popover>
<el-button v-popover:popover>S'active au focus</el-button>
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="manual"
content="this is content, this is content, this is content"
v-model="visible">
<el-button slot="reference" @click="visible = !visible">S'active manuellement</el-button>
</el-popover>
</template>
<script>
export default {
data() {
return {
visible: false
};
}
};
</script>
```
:::
### Informations imbriquées
D'autres composants peuvent s'imbriquer dans un popover.
:::demo Remplacez `content` par un `slot`.
```html
<el-popover
placement="right"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="date"></el-table-column>
<el-table-column width="100" property="name" label="name"></el-table-column>
<el-table-column width="300" property="address" label="address"></el-table-column>
</el-table>
<el-button slot="reference">Cliquez pour activer</el-button>
</el-popover>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-04',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-01',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-03',
name: 'Jack',
address: 'New York City'
}]
};
}
};
</script>
```
:::
### Opérations imbriquées
Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que d'utiliser Dialog.
:::demo
```html
<el-popover
placement="top"
width="160"
v-model="visible">
<p>Voulez-vous vraiment supprimer ceci?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">Annuler</el-button>
<el-button type="primary" size="mini" @click="visible = false">Confirmer</el-button>
</div>
<el-button slot="reference">Supprimer</el-button>
</el-popover>
<script>
export default {
data() {
return {
visible: false,
};
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | Comment le popover se déclenche. | string | click/focus/hover/manual | click |
| title | Titre du popover. | string | — | — |
| content | Contenu du popover, peut être remplacé par un `slot` | string | — | — |
| width | Largeur du popover. | string, number | — | Min width 150px |
| placement | Emplacement du popover. | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | Si le popover est désactivé. | boolean | — | false |
| value / v-model | Si le popover est visible. | Boolean | — | false |
| offset | Décalage du popover. | number | — | 0 |
| transition | Animation de transition du popover. | string | — | el-fade-in-linear |
| visible-arrow | Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
| popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | Classe du popover. | string | — | — |
| open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | 0 |
### Slot
| Nom | Description |
| --- | --- |
| — | Contenu du popover. |
| reference | Element HTML qui déclenche le popover. |
### Évènements
| Nom | Description | Paramètres |
|---------|--------|---------|
| show | Se déclenche quand le popover s'affiche. | — |
| after-enter | Se déclenche quand la transition d'entrée se termine. | — |
| hide | Se déclenche quand le popover disparaît. | — |
| after-leave | Se déclenche quand la transition de sortie se termine. | — |

175
examples/docs/fr-FR/progress.md Normal file
View File

@@ -0,0 +1,175 @@
## Progress
Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.
### Barre de progression linéaire
:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. Vous pouvez personnaliser le format du texte en définissant le `format`.
```html
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
<script>
export default {
methods: {
format(percentage) {
return percentage === 100 ? 'Full' : `${percentage}%`;
}
}
};
</script>
```
:::
### Pourcentage interne
Dans ce cas le pourcentage ne prends pas de place en plus.
:::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre.
```html
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
```
:::
### Couleur personnalisée
Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de progression. il accepte une couleur, une fonction ou un tableau.
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 20,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
customColorMethod(percentage) {
if (percentage < 30) {
return '#909399';
} else if (percentage < 70) {
return '#e6a23c';
} else {
return '#67c23a';
}
},
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
```
:::
### Barre de progression circulaire
:::demo Vous pouvez mettre l'attribut `type` à `circle` pour obtenir une barre circulaire, et utiliser `width` pour changer la taille du cercle.
```html
<el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
```
:::
### Barre de progression du tableau de bord
Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser la barre de progression du tableau de bord.
:::demo
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 10,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --- | ---- | ---- | ---- | ---- |
| **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |
| type | Le type de barre. | string | line/circle/dashboard | line |
| stroke-width | La largeur de la barre. | number | — | 6 |
| text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false |
| status | Le statut actuel de la progression. | string | success/exception/text | — |
| color | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
| show-text | Si le pourcentage doit être affiché. | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | Vous pouvez personnaliser le format du texte en définissant le format | function(percentage) | — | — |

289
examples/docs/fr-FR/quickstart.md Normal file
View File

@@ -0,0 +1,289 @@
## Démarrer
Cette page vous guidera tout le long de l'installation d'Element au sein d'un projet webpack.
### Use vue-cli@3
Nous fournissons un [plugin Element](https://github.com/ElementUI/vue-cli-plugin-element) pour vue-cli@3, que vous pouvez utiliser pour créer rapidement un projet basé sur Element.
### Utiliser le Starter Kit
Nous fournissons un [template de projet](https://github.com/ElementUI/element-starter) pour débuter rapidement. Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce [template](https://github.com/ElementUI/element-in-laravel-starter). VOus pouvez les télécharger directement.
Si vous préférer vous passer de template, voyez la section suivante.
### Importer Element
Element peut être importé entièrement ou à la demande. Commençons par l'import total.
#### Import total
Dans main.js:
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
```
L'exemple ci-dessus importe Element entièrement. Notez que les fichiers CSS doivent être importés séparément.
#### À la demande
Grâce au [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.
Tout d'abord, installez babel-plugin-component:
```bash
npm install babel-plugin-component -D
```
Puis éditez .babelrc:
```json
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
```
Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:
```javascript
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* ou
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
```
Exemple complet (liste complète des composants dans [components.json](https://github.com/ElemeFE/element/blob/master/components.json)):
```javascript
import Vue from 'vue';
import {
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Popover,
Tooltip,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Slider,
Icon,
Row,
Col,
Upload,
Progress,
Spinner,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Timeline,
TimelineItem,
Link,
Divider,
Image,
Calendar,
Backtop,
PageHeader,
CascaderPanel,
Loading,
MessageBox,
Message,
Notification
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
```
### Configuration globale
Lors de l'import d'Element, vous pouvez définir un objet de configuration global. Actuellement il possède de propriétés: `size` et `zIndex`. La propriété `size` détermine la taille par défaut de tout les composants et `zIndex` règle le z-index initial (default: 2000) des fenêtres modales:
Import total d'Element：
```js
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
```
Import partiel d'Element：
```js
import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
```
Avec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.
### Commencer à développer
Maintenant que vous avez ajouté Vue et Element à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser.
### Utiliser Nuxt.js
Vous pouvez également commencer un projet avec [Nuxt.js](https://nuxtjs.org/):
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
</div>

213
examples/docs/fr-FR/radio.md Normal file
View File

@@ -0,0 +1,213 @@
## Radio
Boutons de sélection entre plusieurs options.
### Usage
Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.
:::demo Créer un composant Radio est facile, vous avez juste besoin de lier les `v-model` des options. Chacun équivaut à la valeur de `label` du radio correspondant. Le type de `label` est `String`, `Number` ou `Boolean`.
```html
<template>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
```
:::
### Désactivé
L'attribut `disabled` désactive le radio.
:::demo Ajoutez simplement l'attribut `disabled` au radio.
```html
<template>
<el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
<el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
</template>
<script>
export default {
data () {
return {
radio: 'selected and disabled'
};
}
}
</script>
```
:::
### Groupe de boutons radio
Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
```html
<el-radio-group v-model="radio">
<el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio>
</el-radio-group>
<script>
export default {
data () {
return {
radio: 3
};
}
}
</script>
```
:::
### Style bouton
Des radios affichés comme des boutons standards.
:::demo Changez simplement `el-radio` pour `el-radio-button`. L'attribut `size` permet de régler la taille.
```html
<template>
<div>
<el-radio-group v-model="radio1">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio2" size="medium">
<el-radio-button label="New York" ></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio3" size="small">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" disabled size="mini">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio1: 'New York',
radio2: 'New York',
radio3: 'New York',
radio4: 'New York'
};
}
}
</script>
```
:::
### Avec bordures
:::demo L'attribut `border` ajoute une bordure aux radios.
```html
<template>
<div>
<el-radio v-model="radio1" label="1" border>Option A</el-radio>
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio3" size="small">
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border disabled>Option B</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="mini" disabled>
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1'
};
}
}
</script>
```
:::
### Attributs de Radio
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| ---- | ---- | ---- | ---- | ---- |
| value / v-model | La valeur liée. | string / number / boolean | — | — |
| label | La valeur du radio. | string / number / boolean | — | — |
| disabled | Si le radio est désactivé. | boolean | — | false |
| border | Si une bordure doit être affichée autour du radio. | boolean | — | false |
| size | Taille du radio, ne marche que si `border` est `true`. | string | medium / small / mini | — |
| name | Attribut 'name' natif. | string | — | — |
### Évènements de Radio
| Nom | Description | Paramètres |
| --- | --- | --- |
| change | Se déclenche quand la valeur change. | La valeur du label. |
### Attributs de Radio-group
| Attribut | Description | Type | Valeurs acceptées | Défaut
| ---- | ---- | ---- | ---- | ---- |
| value / v-model | La valeur liée. | string / number / boolean | — | — |
| size | Taille des radios. | string | medium / small / mini | —
| disabled | Si les radios sont désactivés. | boolean | — | false
| text-color | Couleur du texte quand le bouton est actif. | string | — | #ffffff |
| fill | Bordure et couleur de fond quand le bouton est actif. | string | — | #409EFF |
### Évènements de Radio-group
| Nom | Description | Paramètres |
| --- | --- | --- |
| change | Se déclenche quand la valeur change. | La valeur du label. |
### Attributs Radio-button
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| ---- | ---- | ---- | ---- | ---- |
| label | Valeur du radio. | string / number | — | — |
| disabled | Si le radio est désactivé. | boolean | — | false |
| name | Attribut 'name' natif. | string | — | — |

141
examples/docs/fr-FR/rate.md Normal file
View File

@@ -0,0 +1,141 @@
## Rate
Utilisé pour donner une note sur cinq étoiles.
### Usage
:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`. Vous pouvez aussi les affecter avec un objet dont la clé est le seuil et la valeur est la couleur correspondante.
```html
<div class="block">
<span class="demonstration">Défaut</span>
<el-rate v-model="value1"></el-rate>
</div>
<div class="block">
<span class="demonstration">Couleurs pour chaque niveau</span>
<el-rate
v-model="value2"
:colors="colors">
</el-rate>
</div>
<script>
export default {
data() {
return {
value1: null,
value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
}
}
}
</script>
```
:::
### Avec du texte
Vous pouvez ajouter du texte à chaque score.
:::demo Ajoutez l'attribut `show-text` pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut `texts`. C'est un tableau dont la taille doit être égale au score max `max`.
```html
<el-rate
v-model="value"
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text>
</el-rate>
<script>
export default {
data() {
return {
value: null
}
}
}
</script>
```
:::
### Plus d'icônes
Vous pouvez utiliser différentes icônes pour chaque
:::demo Vous pouvez personnaliser les icônes en passant à `icon-classes` un tableau avec trois éléments ou un objet dont la clé est le seuil entre deux niveaux et la valeur la classe d'icônes correspondante. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir d'autres valeurs non sélectionnées.
```html
<el-rate
v-model="value"
:icon-classes="iconClasses"
void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
<script>
export default {
data() {
return {
value: null,
iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
}
}
}
</script>
```
:::
### Lecture seule
Le score peut être en lecture seule. Les demi-étoiles sont supportées.
:::demo Utilisez `disabled` pour mettre le composant en lecture seule. Ajoutez `show-score` pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser `score-template` pour déterminer un template. Il doit contenir `{value}` qui sera remplacé par la valeur du score.
```html
<el-rate
v-model="value"
disabled
show-score
text-color="#ff9900"
score-template="{value} points">
</el-rate>
<script>
export default {
data() {
return {
value: 3.7
}
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | La valeur liée. | number | — | 0 |
| max | Score maximum. | number | — | 5 |
| disabled | Si le score est en lecture seule. | boolean | — | false |
| allow-half | Si les demi-étoiles sont autorisées. | boolean | — | false |
| low-threshold | Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas. | number | — | 2 |
| high-threshold | Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. | number | — | 4 |
| colors | colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | Couleur des icônes non sélectionnées. | string | — | #C6D1DE |
| disabled-void-color | Couleur des icônes non sélectionnées en lecture seule. | string | — | #EFF2F7 |
| icon-classes | Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | Classe des icônes non sélectionnées. | string | — | el-icon-star-off |
| disabled-void-icon-class | Classe des icônes non sélectionnées en lecture seule. | string | — | el-icon-star-on |
| show-text | Si du texte doit apparaître à droite des étoiles. | boolean | — | false |
| show-score | Si le score doit apparaître. Incompatible avec show-text. | boolean | — | false |
| text-color | Couleur du texte. | string | — | #1F2D3D |
| texts | Label des différents scores. | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
| score-template | Template du score. | string | — | {value} |
### Évènements
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| change | Se déclenche quand la valeur change. | Valeur après le changement. |

599
examples/docs/fr-FR/select.md Normal file
View File

@@ -0,0 +1,599 @@
## Select
Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché grâce à un menu déroulant.
### Usage
:::demo `v-model` est la valeur du `el-option` sélectionné.
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### Option désactivée
:::demo Mettez l'attribut `disabled` dans `el-option` à `true` pour désactiver cette option.
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2',
disabled: true
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### Sélecteur désactivé
Vous pouvez désactiver le composant lui-même.
:::demo Ajoutez `disabled` à `el-select` pour le désactiver.
```html
<template>
<el-select v-model="value" disabled placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### Effacer la sélection
Vous pouvez ajouter un bouton pour effacer la sélection.
:::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.
```html
<template>
<el-select v-model="value" clearable placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### Sélecteur multiple
Les sélecteurs multiples utilisent des tags pour afficher les différentes options choisies.
:::demo Ajoutez `multiple` à `el-select` pour le changer en sélecteur multiple. La valeur de `v-model` devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut `collapse-tags`.
```html
<template>
<el-select v-model="value1" multiple placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="value2"
multiple
collapse-tags
style="margin-left: 20px;"
placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value1: [],
value2: []
}
}
}
</script>
```
:::
### Template personnalisé
Vous pouvez définir un template HTML pour l'affichage des options.
:::demo Insérez votre template dans le slot de `el-option`.
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
cities: [{
value: 'Beijing',
label: 'Beijing'
}, {
value: 'Shanghai',
label: 'Shanghai'
}, {
value: 'Nanjing',
label: 'Nanjing'
}, {
value: 'Chengdu',
label: 'Chengdu'
}, {
value: 'Shenzhen',
label: 'Shenzhen'
}, {
value: 'Guangzhou',
label: 'Guangzhou'
}],
value: ''
}
}
}
</script>
```
:::
### Grouper les options
Vous pouvez définir des groupes pour les options du menu.
:::demo Utilisez `el-option-group` pour grouper les options. L'attribut `label` définit le nom du groupe.
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option-group
v-for="group in options"
:key="group.label"
:label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-option-group>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
label: 'Villes célèbres',
options: [{
value: 'Shanghai',
label: 'Shanghai'
}, {
value: 'Beijing',
label: 'Beijing'
}]
}, {
label: 'Nom de ville',
options: [{
value: 'Chengdu',
label: 'Chengdu'
}, {
value: 'Shenzhen',
label: 'Shenzhen'
}, {
value: 'Guangzhou',
label: 'Guangzhou'
}, {
value: 'Dalian',
label: 'Dalian'
}]
}],
value: ''
}
}
}
</script>
```
:::
### Filtrage des options
Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus rapidement.
:::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.
```html
<template>
<el-select v-model="value" filterable placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### Recherche à distance
Vous pouvez aller chercher les options sur le serveur de manière dynamique.
:::demo Ajoutez `filterable` et `remote` pour activer la recherche distante, ainsi que `remote-method`. Cette dernière est une `Function` qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. Notes que si `el-option` est rendu dans une directive `v-for`, vous devriez ajouter l'attribut `key` aux `el-option`. Cette valeur doit unique, comme `item.value` dans l'exemple suivant.
```html
<template>
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="Entrez un mot-clé"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}
},
mounted() {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
}
}
}
</script>
```
:::
### Créer des options
Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu.
:::demo En utilisant `allow-create`, peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si `filterable` est activé. Cette exemple montre aussi `default-first-option`, qui permet de sélectionner la première option en pressant Entrée sans avoir à utiliser la souris ou le clavier.
```html
<template>
<el-select
v-model="value"
multiple
filterable
allow-create
default-first-option
placeholder="Choisissez les tags de vos articles">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'HTML',
label: 'HTML'
}, {
value: 'CSS',
label: 'CSS'
}, {
value: 'JavaScript',
label: 'JavaScript'
}],
value: []
}
}
}
</script>
```
:::
:::tip
Si la valeur de Select est un objet, assurez-vous d'utiliser `value-key` comme identifiant unique.
:::
### Attributs de Select
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | La valeur liée. | boolean / string / number | — | — |
| multiple | Si la sélection multiple est activée. | boolean | — | false |
| disabled | Si le sélecteur est désactivé. | boolean | — | false |
| value-key | Identifiant unique pour la valeur, requis quand la valeur est un objet. | string | — | value |
| size | Taille de l'Input. | string | large/small/mini | — |
| clearable | Si la sélection est effaçable. | boolean | — | false |
| collapse-tags | Si les tags peuvent être réduits, dans le cas d'une sélection multiple. | boolean | — | false |
| multiple-limit | Nombre maximum d'options multiples sélectionnable. Pas de limites quand est à 0. | number | — | 0 |
| name | L'attribut name natif du sélecteur. | string | — | — |
| autocomplete | L'attribut autocomplete natif du sélecteur. | string | — | off |
| auto-complete | @DEPRECATED dans la prochaine version majeure. | string | — | off |
| placeholder | Le placeholder du champ. | string | — | Select |
| filterable | Si les options sont filtrables. | boolean | — | false |
| allow-create | Si l'utilisateur peut créer des options. Dans ce cas `filterable` doit être activé. | boolean | — | false |
| filter-method | Méthode de filtrage personnalisée. | function | — | — |
| remote | Si les options sont chargées dynamiquement depuis le serveur. | boolean | — | false |
| remote-method | Méthode pour la recherche distante. | function | — | — |
| loading | Si le sélecteur est en train de charger des options. | boolean | — | false |
| loading-text | Texte à afficher pendant le chargement. | string | — | Loading |
| no-match-text | Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No matching data |
| no-data-text | Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No data |
| popper-class | Classe du menu déroulant. | string | — | — |
| reserve-keyword | Quand `multiple` et `filter` sont activés, s'il faut réserver le mot-clé courant après la sélection d'une option. | boolean | — | false |
| default-first-option | Sélectionne la première option avec Entrée. Utilisable avec `filterable` ou `remote` | boolean | - | false |
| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true |
| automatic-dropdown | Pour les sélecteurs non filtrables, détermine si le menu apparaît au focus du champ. | boolean | - | false |
### Évènements de Select
| Nom | Description | Paramètre |
|---------|---------|---------|
| change | Se déclenche quand la valeur change. | current selected value |
| visible-change | Se déclenche quand le menu apparaît ou disparaît. | true quand il apparaît, sinon false . |
| remove-tag | Se déclenche quand un tag est retiré. | La valeur du tag retiré. |
| clear | Se déclenche quand le champ est effacé grâce au bouton. | — |
| blur | Se déclenche quand le champ perd le focus. | (event: Event) |
| focus | Se déclenche gagne le focus. | (event: Event) |
### Slots de Select
| Nom | Description |
|---------|-------------|
| — | Liste de options. |
| prefix | Contenu du préfixe du sélecteur. |
| empty | Contenu lorsqu'il n'y a aucune option. |
### Attributs du groupe d'options
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | Nom du group. | string | — | — |
| disabled | Si les options du groupe sont désactivées. | boolean | — | false |
### Attributs des options
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value | Valeur de l'option. | string/number/object | — | — |
| label | Label de l'option, identique à `value` si omis. | string/number | — | — |
| disabled | Si l'option est désactivée. | boolean | — | false |
### Méthodes
| Méthode | Description | Paramètres |
|------|--------|-------|
| focus | Focus sur l'input. | - |
| blur | Enlève le focus de l'input et cache le menu. | - |

240
examples/docs/fr-FR/slider.md Normal file
View File

@@ -0,0 +1,240 @@
## Slider
Permet de sélectionner une valeur au sein d'un intervalle.
### Usage
La valeur est affichée lorsque le slider est utilisé.
:::demo Vous pouvez décider de la valeur initiale en initialisant la variable liée.
```html
<template>
<div class="block">
<span class="demonstration">Valeur par défaut</span>
<el-slider v-model="value1"></el-slider>
</div>
<div class="block">
<span class="demonstration">Valeur initiale personnalisée</span>
<el-slider v-model="value2"></el-slider>
</div>
<div class="block">
<span class="demonstration">Pas de tooltip</span>
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
</div>
<div class="block">
<span class="demonstration">Tooltip formatté</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
</div>
<div class="block">
<span class="demonstration">Désactivé</span>
<el-slider v-model="value5" disabled></el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: 36,
value4: 48,
value5: 42
}
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
}
</script>
```
:::
### Valeurs discrètes
Les valeurs peuvent être discrètes.
:::demo Réglez le pas avec l'attribut `step`. Vous pouvez affiché chaque point grâce à `show-stops`.
```html
<template>
<div class="block">
<span class="demonstration">Points absents</span>
<el-slider
v-model="value1"
:step="10">
</el-slider>
</div>
<div class="block">
<span class="demonstration">Points affichés</span>
<el-slider
v-model="value2"
:step="10"
show-stops>
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 0
}
}
}
</script>
```
:::
### Slider avec champ d'input
Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.
:::demo Ajoutez l'attribut `show-input` pour ajouter le champ à droite du Slider.
```html
<template>
<div class="block">
<el-slider
v-model="value"
show-input>
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: 0
}
}
}
</script>
```
:::
### Sélectionner une intervalle
Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.
:::demo Ajouter l'attribut `range` active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.
```html
<template>
<div class="block">
<el-slider
v-model="value"
range
show-stops
:max="10">
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: [4, 8]
}
}
}
</script>
```
:::
### Mode vertical
:::demo Ajoutez l'attribut `vertical` active le mode vertical. Dans ce mode, l'attribut `height` est requis.
```html
<template>
<div class="block">
<el-slider
v-model="value"
vertical
height="200px">
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: 0
}
}
}
</script>
```
:::
:::demo Vous pouvez afficher des marqueurs sur le slider grâce à l'attribut `marks`.
```html
<template>
<div class="block">
<el-slider
v-model="value"
range
:marks="marks">
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: [30, 60],
marks: {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '50%')
}
}
}
}
}
</script>
```
:::
## Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | La valeur liée. | number | — | 0 |
| min | Valeur minimale. | number | — | 0 |
| max | Valeur maximale. | number | — | 100 |
| disabled | Si le Slider est désactivé. | boolean | — | false |
| step | La taille du pas. | number | — | 1 |
| show-input | Si une champ d'input doit être affiché, ne marche que si `range` est `false`. | boolean | — | false |
| show-input-controls | Si des boutons de contrôle doivent être affichés quand `show-input` est `true`. | boolean | — | true |
| input-size | Taille du champ d'input. | string | large / medium / small / mini | small |
| show-stops | Si les points de valeurs discrètes doivent être affichés. | boolean | — | false |
| show-tooltip | Si le tooltip doit être affiché. | boolean | — | true |
| format-tooltip | Format du contenu du tooltip. | function(value) | — | — |
| range | Si le mode intervalle est activé. | boolean | — | false |
| vertical | Si le mode vertical est activé. | boolean | — | false |
| height | Hauteur du Slider, requis en mode vertical. | string | — | — |
| label | Label pour les lecteurs d'écran. | string | — | — |
| debounce | Délai après écriture en millisecondes, marche quand `show-input` est `true`. | number | — | 300 |
| tooltip-class | Classe du tooltip. | string | — | — |
| marks | Marqueurs, les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object | — | — |
## Évènements
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| change | Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile). | La nouvelle valeur. |
| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |

162
examples/docs/fr-FR/steps.md Normal file
View File

@@ -0,0 +1,162 @@
## Steps
Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.
### Usage
Voici une barre d'étapes basique.
:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Number`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.
```html
<el-steps :active="active" finish-status="success">
<el-step title="Étape 1"></el-step>
<el-step title="Étape 2"></el-step>
<el-step title="Étape 3"></el-step>
</el-steps>
<el-button style="margin-top: 12px;" @click="next">Prochaine étape</el-button>
<script>
export default {
data() {
return {
active: 0
};
},
methods: {
next() {
if (this.active++ > 2) this.active = 0;
}
}
}
</script>
```
:::
### Barre avec statut
Vous pouvez afficher le statut de chaque étape.
:::demo Utilisez `title` pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un `slot`. La liste complète des slots se trouve en fin de page.
```html
<el-steps :space="200" :active="1" finish-status="success">
<el-step title="Terminé"></el-step>
<el-step title="En cours"></el-step>
<el-step title="Étape 3"></el-step>
</el-steps>
```
:::
### Barre avec description
Vous pouvez ajouter une description pour chaque étape.
:::demo
```html
<el-steps :active="1">
<el-step title="Étape 1" description="Une description"></el-step>
<el-step title="Étape 2" description="Une description"></el-step>
<el-step title="Étape 3" description="Une description"></el-step>
</el-steps>
```
:::
### Centrer
Le titre et la description peuvent être centrés.
:::demo
```html
<el-steps :active="2" align-center>
<el-step title="Étape 1" description="Une description"></el-step>
<el-step title="Étape 2" description="Une description"></el-step>
<el-step title="Étape 3" description="Une description"></el-step>
<el-step title="Étape 4" description="Une description"></el-step>
</el-steps>
```
:::
### Barre avec icône
Une grande variété d'icônes peut être utilisée dans la barre d'étapes.
:::demo L'icône est ajoutée en utilisant `icon`. Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un `slot`.
```html
<el-steps :active="1">
<el-step title="Étape 1" icon="el-icon-edit"></el-step>
<el-step title="Étape 2" icon="el-icon-upload"></el-step>
<el-step title="Étape 3" icon="el-icon-picture"></el-step>
</el-steps>
```
:::
### Barre verticale
La barre d'étape peut être affichée de manière verticale.
:::demo Mettez simplement l'attribut `direction` à ` vertical` dans l'élément `el-steps`.
```html
<div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="Étape 1"></el-step>
<el-step title="Étape 2"></el-step>
<el-step title="Étape 3"></el-step>
</el-steps>
</div>
```
:::
### Barre d'étapes simple
La barre peut être simplifiée de manière à ce que `align-center`, `description`, `direction` et `space` soient ignorées.
:::demo
```html
<el-steps :space="200" :active="1" simple>
<el-step title="Étape 1" icon="el-icon-edit"></el-step>
<el-step title="Étape 2" icon="el-icon-upload"></el-step>
<el-step title="Étape 3" icon="el-icon-picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="Étape 1" ></el-step>
<el-step title="Étape 2" ></el-step>
<el-step title="Étape 3" ></el-step>
</el-steps>
```
:::
### Attributs de la barre
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| space | L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages. | number / string | — | — |
| direction | L'orientation de la barre. | string | vertical/horizontal | horizontal |
| active | L'index de l'étape courante. | number | — | 0 |
| process-status | Le statut de l'étape courante. | string | wait / process / finish / error / success | process |
| finish-status | Le statut de la dernière étape. | string | wait / process / finish / error / success | finish |
| align-center | Si le titre et la description doivent être centrés. | boolean | — | false |
| simple | Si un thème simple doit être appliqué. | boolean | - | false |
### Attributs des étapes
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| title | Titre de l'étape. | string | — | — |
| description | Description de l'étape. | string | — | — |
| icon | step icon | Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots. | string | — |
| status | Le statut actuel. Sera déterminé par la barre d'étapes si omis. | wait / process / finish / error / success | - |
### Slots des étapes
| Nom | Description |
|----|----|
| icon | L'icône de l'étape. |
| title | Le titre de l'étape. |
| description | La description de l'étape. |

146
examples/docs/fr-FR/switch.md Normal file
View File

@@ -0,0 +1,146 @@
## Switch
Switch est utilisé pour choisir entre deux états opposés.
### Usage
:::demo Liez `v-model` à une variable de type `Boolean`. Les attributs `active-color` et `inactive-color` déterminent les couleurs des deux états.
```html
<el-switch v-model="value1">
</el-switch>
<el-switch
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>
```
:::
### Description
:::demo Utilisez `active-text` et `inactive-text` pour afficher une description de chaque étape.
```html
<el-switch
v-model="value1"
active-text="Paiement mensuel"
inactive-text="Paiement annuel">
</el-switch>
<el-switch
style="display: block"
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="Paiement mensuel"
inactive-text="Paiement annuel">
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>
```
:::
### Valeurs des états
:::demo Vous pouvez utiliser `active-value` et `inactive-value` pour déterminer la valeur de chaque état. Ils prennent un `Boolean`, `String` ou `Number`.
```html
<el-tooltip :content="'Valeur de l\'état: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip>
<script>
export default {
data() {
return {
value: '100'
}
}
};
</script>
```
:::
### Désactivé
:::demo Ajoutez l'attribut `disabled` pour désactiver le switch.
```html
<el-switch
v-model="value1"
disabled>
</el-switch>
<el-switch
v-model="value2"
disabled>
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: false
}
}
};
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| ----| ----| ----| ----|---- |
| value / v-model | La valeur liée. | boolean / string / number | — | — |
| disabled | Si le switch est désactivé. | boolean | — | false |
| width | Largeur du switch. | number | — | 40 |
| active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | — |
| inactive-icon-class | Classe de l'icône de l'état `off`, écrase `inactive-text`. | string | — | — |
| active-text | Texte affiché dans l'état `on`. | string | — | — |
| inactive-text | Texte affiché dans l'état `off`. | string | — | — |
| active-value | Valeur du switch dans l'état `on`. | boolean / string / number | — | true |
| inactive-value | Valeur du switch dans l'état `off`. | boolean / string / number | — | false |
| active-color | Couleur de fond de l'état `on`. | string | — | #409EFF |
| inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA |
| name| Nom du champ d'input du switch. | string | — | — |
| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
### Évènements
| Nom | Description | Paramètres |
| ---- | ----| ---- |
| change | Se déclenche quand la valeur change. | La valeur après changement. |
### Méthodes
| Méthode | Description | Paramètres |
|-------|--------|------- |
| focus | Donne le focus au switch. | — |

1931
examples/docs/fr-FR/table.md Normal file
View File

File diff suppressed because it is too large Load Diff

308
examples/docs/fr-FR/tabs.md Normal file
View File

@@ -0,0 +1,308 @@
## Tabs
Divise des collections de données de types différents, mais reliées entre elles par un contexte ou un type global.
### Usage
Onglets basiques.
:::demo Tabs fournit un outil de sélection des onglets. Par défaut, le premier onglet est sélectionné et actif mais vous pouvez activer n'importe lequel en réglant l'attribut `value`.
```html
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="User" name="first">Utilisateur</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Rôle</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Tâche</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
```
:::
### Style carte
Les onglets peuvent être stylisés comme des cartes.
:::demo Mettez `type` à `card` pour avoir des onglets avec un style de carte.
```html
<template>
<el-tabs type="card" @tab-click="handleClick">
<el-tab-pane label="User">Utilisateur</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Rôle</el-tab-pane>
<el-tab-pane label="Task">Tâche</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
```
:::
### Style carte avec bordure
Onglets avec style de carte et bordure.
:::demo Mettez `type` à `border-card`.
```html
<el-tabs type="border-card">
<el-tab-pane label="User">Utilisateur</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Rôle</el-tab-pane>
<el-tab-pane label="Task">Tâche</el-tab-pane>
</el-tabs>
```
:::
### Position des onglets
Vous pouvez utiliser `tab-position` pour régler la position des onglets.
:::demo Il y a quatre positions différentes: `tabPosition="left|right|top|bottom"`
```html
<template>
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
<el-radio-button label="top">En haut</el-radio-button>
<el-radio-button label="right">À droite</el-radio-button>
<el-radio-button label="bottom">En bas</el-radio-button>
<el-radio-button label="left">À gauche</el-radio-button>
</el-radio-group>
<el-tabs :tab-position="tabPosition" style="height: 200px;">
<el-tab-pane label="User">Utilisateur</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Rôle</el-tab-pane>
<el-tab-pane label="Task">Tâche</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
tabPosition: 'left'
};
}
};
</script>
```
:::
### Onglet personnalisé
Vous pouvez utiliser un slot pour customiser le label d'un onglet.
:::demo
```html
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> Route</span>
Route
</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Rôle</el-tab-pane>
<el-tab-pane label="Task">Tâche</el-tab-pane>
</el-tabs>
```
:::
### Ajouter et supprimer des onglets
Seuls les onglets de type carte supportent l'ajout et la suppression.
:::demo
```html
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
<script>
export default {
data() {
return {
editableTabsValue: '2',
editableTabs: [{
title: 'Onglet 1',
name: '1',
content: 'Contenu de l\'onglet 1'
}, {
title: 'Onglet 2',
name: '2',
content: 'Contenu de l\'onglet 2'
}],
tabIndex: 2
}
},
methods: {
handleTabsEdit(targetName, action) {
if (action === 'add') {
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'Nouvel onglet',
name: newTabName,
content: 'Contenu du nouvel onglet'
});
this.editableTabsValue = newTabName;
}
if (action === 'remove') {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
}
</script>
```
:::
### Personnaliser le bouton d'ajout d'onglet
:::demo
```html
<div style="margin-bottom: 20px;">
<el-button
size="small"
@click="addTab(editableTabsValue)"
>
Ajouter un onglet
</el-button>
</div>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
<script>
export default {
data() {
return {
editableTabsValue: '2',
editableTabs: [{
title: 'Onglet 1',
name: '1',
content: 'Contenu de l\'onglet 1'
}, {
title: 'Onglet 2',
name: '2',
content: 'Contenu de l\'onglet 2'
}],
tabIndex: 2
}
},
methods: {
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'Nouvel onglet',
name: newTabName,
content: 'Contenu du nouvel onglet'
});
this.editableTabsValue = newTabName;
},
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
</script>
```
:::
### Attributs de Tabs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | La valeur liée, nom de l'onglet sélectionné. | string | — | Nom du premier onglet. |
| type | Type de l'onglet. | string | card/border-card | — |
| closable | Si des onglets peuvent être supprimés. | boolean | — | false |
| addable | Si des onglets peuvent être ajoutés. | boolean | — | false |
| editable | Si des onglets peuvent être ajoutés et supprimés. | boolean | — | false |
| tab-position | Position des onglets. | string | top/right/bottom/left | top |
| stretch | Si la largeur des onglets s'adapte au conteneur. | boolean | - | false |
| before-leave | Fonction de hook avant de changer d'onglet. Si `false` est retourné ou qu'une `Promise` retournée et rejetée, le changement sera annulé. | Function(activeName, oldActiveName) | — | — |
### Évènements de Tabs
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| tab-click | Se déclenche quand on clique sur un onglet. | clicked tab |
| tab-remove | Se déclenche quand on clique sur le bouton de suppression des onglets. | name of the removed tab |
| tab-add | Se déclenche quand on clique sur le bouton d'ajout des onglets. | — |
| edit | Se déclenche quand on clique sur les boutons d'ajout ou de suppression des onglets. | (targetName, action) |
### Attributs de Tab-pane
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| label | Titre de l'onglet. | string | — | — |
| disabled | Si l'onglet est désactivé. | boolean | — | false |
| name | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. |
| closable | Si l'onglet est supprimable. | boolean | — | false |
| lazy | Si le contenu de l'onglet bénéficie du lazy-loading. | boolean | — | false |

204
examples/docs/fr-FR/tag.md Normal file
View File

@@ -0,0 +1,204 @@
## Tag
Les tags sont utiles sont marquer certaines données afin d'ajouter des informations et de les retrouver plus facilement.
### Usage
:::demo Utilisez l'attribut `type` pour définir le type de tag. De plus, l'attribut `color` détermine la couleur de fond.
```html
<el-tag>Tag 1</el-tag>
<el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag 5</el-tag>
```
:::
### Supprimer des tags
:::demo L'attribut `closable` détermine si un tag est supprimable grâce à un `Boolean`. Par défaut la suppression bénéficie d'un animation de fading. Utilisez `disable-transitions` si vous ne souhaitez pas d'animations en utilisant un `Boolean` à `true`. L'évènement `close` se déclenche quand un tag est supprimé.
```html
<el-tag
v-for="tag in tags"
:key="tag.name"
closable
:type="tag.type">
{{tag.name}}
</el-tag>
<script>
export default {
data() {
return {
tags: [
{ name: 'Tag 1', type: '' },
{ name: 'Tag 2', type: 'success' },
{ name: 'Tag 3', type: 'info' },
{ name: 'Tag 4', type: 'warning' },
{ name: 'Tag 5', type: 'danger' }
]
};
}
}
</script>
```
:::
### Édition dynamique
Vous pouvez utiliser l'évènement `close` pour ajouter et supprimer des tags dynamiquement.
:::demo
```html
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="mini"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ Nouveau Tag</el-button>
<style>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
<script>
export default {
data() {
return {
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: ''
};
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
}
}
}
</script>
```
:::
### Tailles
En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composants.
:::demo Utilisez `size` pour choisir une autre taille parmi `medium`, `small` ou `mini`.
```html
<el-tag>Défaut</el-tag>
<el-tag size="medium">Medium</el-tag>
<el-tag size="small">Small</el-tag>
<el-tag size="mini">Mini</el-tag>
```
:::
### Theme
Les balises utilisent trois thèmes différents: `dark`, `light` et `plain`
:::demo Utilisez `effect` pour changer. La valeur par défaut est `light`
```html
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="plain">
{{ item.label }}
</el-tag>
</div>
<script>
export default {
data() {
return {
items: [
{ type: '', label: 'Tag 1' },
{ type: 'success', label: 'Tag 2' },
{ type: 'info', label: 'Tag 3' },
{ type: 'danger', label: 'Tag 4' },
{ type: 'warning', label: 'Tag 5' }
]
}
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | Type du tag. | string | success/info/warning/danger | — |
| closable | Si le tag peut être supprimé. | boolean | — | false |
| disable-transitions | Si les animations sont désactivées. | boolean | — | false |
| hit | Si le tag à une bordure mise en valeur. | boolean | — | false |
| color | Couleur de fond du tag. | string | — | — |
| size | Taille du tag. | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
### Évènements
| Nom | Description | Paramètres |
|---------- |-------- |---------- |
| click | Se déclenche quand le tag est cliqué. | — |
| close | Se déclenche quand le tag est supprimé. | — |

203
examples/docs/fr-FR/time-picker.md Normal file
View File

@@ -0,0 +1,203 @@
## TimePicker
Utiliser TimePicker pour sélectionner un horaire.
### Sélection d'horaire fixe
Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.
:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`.
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="Choisissez un horaire">
</el-time-select>
<script>
export default {
data() {
return {
value: ''
};
}
}
</script>
```
:::
### Sélection d'horaire libre
Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
:::demo Utilisez `el-time-picker` puis l'attribut `picker-options` et sa propriété `selectableRange` pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut `arrow-control` est présent.
```html
<template>
<el-time-picker
v-model="value1"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="Horaire libre">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="Horaire libre">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value1: new Date(2016, 9, 10, 18, 40),
value2: new Date(2016, 9, 10, 18, 40)
};
}
}
</script>
```
:::
### Intervalle de temps fixe
Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés s'ils ont lieu avant l'horaire de début.
:::demo
```html
<template>
<el-time-select
placeholder="Horaire de début"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="Horaire de fin"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
</el-time-select>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
}
}
</script>
```
:::
### Intervalle de temps libre
Vous pouvez également définir un intervalle libre.
:::demo Ajoutez l'attribut `is-range`. L'attribut `arrow-control` est aussi supporté dans ce mode.
```html
<template>
<el-time-picker
is-range
v-model="value1"
range-separator="To"
start-placeholder="Horaire de début"
end-placeholder="Horaire de fin">
</el-time-picker>
<el-time-picker
is-range
arrow-control
v-model="value2"
range-separator="To"
start-placeholder="Horaire de début"
end-placeholder="Horaire de fin">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
};
}
}
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | La valeur liée. | date(TimePicker) / string(TimeSelect) | - | - |
| readonly | Si TimePicker est en lecture seule. | boolean | — | false |
| disabled | Si TimePicker est désactivé. | boolean | — | false |
| editable | Si le champ d'input est éditable. | boolean | — | true |
| clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
| size | Taille du champ. | string | medium / small / mini | — |
| placeholder | Placeholder en mode non-intervalle. | string | — | — |
| start-placeholder | Placeholder de l'horaire de début en mode intervalle. | string | — | — |
| end-placeholder | Placeholder de l'horaire de fin en mode intervalle. | string | — | — |
| is-range | Si le mode intervalle est activé, marche avec `<el-time-picker>`. | boolean | — | false |
| arrow-control | Si les flèches directionnelles peuvent être utilisées, marche avec `<el-time-picker>`. | boolean | — | false |
| align | Alignement. | left / center / right | left |
| popper-class | Classe du menu du TimePicker. | string | — | — |
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
| range-separator | Séparateur d'intervalle. | string | - | '-' |
| default-value | Optionnel, date d'aujourd'hui par défaut. | `Date` pour le TimePicker, `string` pour le TimeSelect | Toute valeur acceptée par `new Date()` pour le TimePicker, une valeur sélectionnable pour TimeSelect. | — |
| value-format | Optionnel, uniquement pour TimePicker, format de la valeur. Si non spécifié, la valeur sera un objet `Date`. | string | Voir [date formats](#/en-US/component/date-picker#date-formats) | — |
| name | Attribut `name` natif de l'input. | string | — | — |
| prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time |
| clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
### Options de TimeSelect
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | Horaire de début. | string | — | 09:00 |
| end | Horaire de fin. | string | — | 18:00 |
| step | Intervalle entre les horaires. | string | — | 00:30 |
| minTime | Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé. | string | — | 00:00 |
| maxTime | Horaire maximum, n'importe quel horaire après celui-ci sera désactivé. | string | — | — |
### Options de TimePicker
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | Intervalle de temps disponible, e.g.`'18:30:00 - 20:30:00'` ou ` ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
| format | Format du sélecteur. | string | hour `HH`, minute `mm`, second `ss`, AM/PM `A` | HH:mm:ss |
### Évènements
| Nom | Description | Paramètres |
|---------|--------|---------|
| change | Se déclenche quand l'utilisateur confirme la valeur. | La valeur confirmée. |
| blur | Se déclenche quand le composant perd le focus. | L'instance du composant. |
| focus | Se déclenche quand le composant a le focus. | L'instance du composant. |
### Méthodes
| Méthode | Description | Paramètres |
| ---- | ---- | ---- |
| focus | Met le focus sur le composant. | - |

156
examples/docs/fr-FR/timeline.md Normal file
View File

@@ -0,0 +1,156 @@
## Timeline
Affiche une suite d'évènements dans un ordre chronologique.
### Usage
La timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.
:::demo
```html
<div class="block">
<div class="radio">
Order:
<el-radio-group v-model="reverse">
<el-radio :label="true">Descendant</el-radio>
<el-radio :label="false">Ascendant</el-radio>
</el-radio-group>
</div>
<el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
<script>
export default {
data() {
return {
reverse: true,
activities: [{
content: 'Début de l\'évènement',
timestamp: '2018-04-15'
}, {
content: 'Approuvé',
timestamp: '2018-04-13'
}, {
content: 'Succès',
timestamp: '2018-04-11'
}]
};
}
};
</script>
```
:::
### Noeud personnalisé
Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
:::demo
```html
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
<script>
export default {
data() {
return {
activities: [{
content: 'Icône',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more'
}, {
content: 'Couleur',
timestamp: '2018-04-03 20:46',
color: '#0bbd87'
}, {
content: 'Taille',
timestamp: '2018-04-03 20:46',
size: 'large'
}, {
content: 'Défaut',
timestamp: '2018-04-03 20:46'
}]
};
}
};
</script>
```
:::
### Timestamp personnalisé
Le timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.
:::demo
```html
<div class="block">
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>Mise à jour du template GitHub</h4>
<p>Commit de Tom le 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Mise à jour du template GitHub</h4>
<p>Commit de Tom le 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>Mise à jour du template GitHub</h4>
<p>Commit de Tom le 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
```
:::
### Attributs de Timeline
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| reverse | Si l'ordre chronologique est ascendant ou descendant, le défaut étant ascendant. | boolean | — | false |
### Attribut de Timeline-item
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| timestamp | Le contenu du timestamp. | string | - | — |
| hide-timestamp | Si le timestamp doit être affiché. | boolean | — | false |
| placement | La position du timestamp. | string | top / bottom | bottom |
| type | Le type de noeud. | string | primary / success / warning / danger / info | - |
| color | La couleur de fond du noeud. | string | hsl / hsv / hex / rgb | - |
| size | La taille du noeud | string | normal / large | normal |
| icon | Le nom de classe de l'icône. | string | — | - |
### Slots de Timeline-Item
| Nom | Description |
|------|--------|
| — | Contenu personnalisé pour le timeline-item. |
| dot | Noeud personnalisé. |

197
examples/docs/fr-FR/tooltip.md Normal file
View File

@@ -0,0 +1,197 @@
## Tooltip
Permet d'afficher des informations au passage de la souris sur un élément.
### Usage
Tooltip a 9 emplacements.
:::demo L'attribut `content` détermine le contenu à afficher. L'attribut `placement` détermine la position du tooltip. Sa valeur est sous la forme `[orientation]-[alignment]` avec quatre orientations `top`, `left`, `right`, `bottom` et trois alignements `start`, `end`, `null`, le défaut étant `null`. Par exemple, `placement="left-end"` affichera la tooltip sur la gauche de l'élément et le bas de la tooltip sera aligné avec le bas de l'élément.
```html
<div class="box">
<div class="top">
<el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
<el-button>top-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
<el-button>top</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
<el-button>top-end</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
<el-button>left-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
<el-button>left</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
<el-button>left-end</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
<el-button>right-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
<el-button>right</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
<el-button>right-end</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
<el-button>bottom-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
<el-button>bottom</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
<el-button>bottom-end</el-button>
</el-tooltip>
</div>
</div>
<style>
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 110px;
}
.right {
float: right;
width: 110px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
.el-button {
width: 110px;
}
}
</style>
```
:::
### Thèmes
Tooltip a deux thèmes: `dark` et `light`。
:::demo Utilisez `effect` pour modifier le thème, le défaut étant `dark`.
```html
<el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" placement="bottom" effect="light">
<el-button>Light</el-button>
</el-tooltip>
```
:::
### Plus de contenu
Vous pouvez afficher plus de lignes et formater leur contenu.
:::demo Utiliser un slot nommé `content` au lieu de l'attribut.
```html
<el-tooltip placement="top">
<div slot="content">Multiples lignes<br/>Seconde ligne</div>
<el-button>Top center</el-button>
</el-tooltip>
```
:::
### Usage avancé
Vous pouvez utiliser d'autres attributs pour un usage plus poussé:
`transition` permet de définir l'animation d'apparition et de disparition du tooltip, le défaut étant el-fade-in-linear.
`disabled` permet de désactiver le tooltip. Mettez-le simplement à `true`.
En réalité, Tooltip est une extension de [Vue-popper](https://github.com/element-component/vue-popper), vous pouvez donc utiliser n'importe quel attribut de Vue-popper.
:::demo
```html
<template>
<el-tooltip :disabled="disabled" content="Cliquez pour désactiver le tooltip" placement="bottom" effect="light">
<el-button @click="disabled = !disabled">Cliquez pour {{disabled ? 'activer' : 'désactiver'}} le tooltip</el-button>
</el-tooltip>
</template>
<script>
export default {
data() {
return {
disabled: false
};
}
};
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .expand-fade-leave-active {
margin-left: 20px;
opacity: 0;
}
</style>
```
:::
:::tip
Le composant `router-link` n'est pas supporté par tooltip, utilisez plutôt `vm.$router.push`.
Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, plus d'informations sur [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). Vous aurez besoin de mettre ces éléments dans un conteneur pour que cela fonctionne.
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|----------------|---------|-----------|-------------|--------|
| effect | Thème du Tooltip. | string | dark/light | dark |
| content | Contenu à afficher, écrasé par `slot#content`. | String | — | — |
| placement | Position du Tooltip. | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value / v-model | Visibilité du Tooltip. | boolean | — | false |
| disabled | Si le Tooltip est désactivé. | boolean | — | false |
| offset | Décalage du Tooltip. | number | — | 0 |
| transition | Animation de transition. | string | — | el-fade-in-linear |
| visible-arrow | Si une flèche doit être affichée. Pour plus d'information, voir [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
| popper-options | Paramètres [popper.js](https://popper.js.org/documentation.html). | Object | Se référer à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| open-delay | Délai avant l'apparition en millisecondes. | number | — | 0 |
| manual | Si le contrôle du Tooltip doit être manuel. `mouseenter` et `mouseleave` n'auront pas d'effet si `true`. | boolean | — | false |
| popper-class | Classe du popper de Tooltip. | string | — | — |
| enterable | Si la souris peut entrer dans la Tooltip. | Boolean | — | true |
| hide-after | Délai avant disparition. | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Tooltip. | number | — | 0 |

260
examples/docs/fr-FR/transfer.md Normal file
View File

@@ -0,0 +1,260 @@
## Transfer
Permet de transférer des options d'une liste à une autre de manière ergonomique.
### Usage
:::demo Les données sont passée via l'attribut `data`. Ce doit être un tableau d'objets, chaque objet ayant les propriétés suivantes: `key` étant l'identifiant de l'objet, `label` étant le texte à afficher et `disabled` indiquant si l'objet est désactivé. Ces objets sont synchronisés avec `v-model`, sa valeur étant un tableau d'identifiants des objets. Si vous ne souhaitez pas avoir une liste vide par défaut, vous pouvez donc initialiser `v-model` avec un tableau.
```html
<template>
<el-transfer
v-model="value"
:data="data">
</el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: [1, 4]
};
}
};
</script>
```
:::
### Filtrable
Vous pouvez filtrer les options.
:::demo Ajoutez l'attribut `filterable` activer le filtrage. Par défaut, si la propriété `label` de l'objet contient le mot-clé, il sera inclus dans les résultats. Vous pouvez aussi implémenter votre propre filtre grâce à `filter-method`. Cette fonction est lancée à chaque changement de mot-clé. Si elle retourne `true` l'objet en question sera dans les résultats.
```html
<template>
<el-transfer
filterable
:filter-method="filterMethod"
filter-placeholder="State Abbreviations"
v-model="value"
:data="data">
</el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
states.forEach((city, index) => {
data.push({
label: city,
key: index,
initial: initials[index]
});
});
return data;
};
return {
data: generateData(),
value: [],
filterMethod(query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
}
};
}
};
</script>
```
:::
### Personnalisable
Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer.
:::demo Utilisez `titles`, `button-texts`, `render-content` et `format` pour personnaliser respectivement les titres des listes, les textes des boutons, les fonctions de rendus des objets et le texte des statuts du header. Vous pouvez aussi utiliser des slots pour les objets. Pour le contenu du footer, deux slots sont fournis: `left-footer` et `right-footer`. Si vous souhaitez que certains items soient sélectionnés par défaut, utilisez `left-default-checked` et `right-default-checked`. Enfin, cet exemple utilise aussi l'évènement `change`. Notez que cet exemple ne fonctionne pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, `render-content` fonctionnera si les dépendances sont satisfaites.
```html
<template>
<p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="value"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data">
<el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
</el-transfer>
<p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="value4"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data">
<span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
<el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
</el-transfer>
</div>
</div>
</template>
<style>
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
</style>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: [1],
value4: [1],
renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>;
}
};
},
methods: {
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
}
}
};
</script>
```
:::
### Alias des propriétés
Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos objets ont des propriétés différentes, vous pouvez utiliser l'attribut `props` pour définir des alias.
:::demo Les objets de cet exemple n'ont pas de `key` ni `label`, à la place ils ont `value` et `desc`. Vous devez donc configurer les alias de `key` et `label`.
```html
<template>
<el-transfer
v-model="value"
:props="{
key: 'value',
label: 'desc'
}"
:data="data">
</el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
value: i,
desc: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: []
};
}
};
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | La valeur liée. | array | — | — |
| data | Données principales. | array[{ key, label, disabled }] | — | [ ] |
| filterable | Si Transfer est filtrable. | boolean | — | false |
| filter-placeholder | Placeholder du champ de filtrage. | string | — | Enter keyword |
| filter-method | Méthode de filtrage. | function | — | — |
| target-order | Ordre de tri des éléments de la liste d'arrivée. S'il est à `original`, les éléments garderont le même ordre que la liste d'origine. Si à `push`, les nouveaux éléments seront mis à la suite des anciens. Si mis à `unshift`, les nouveaux éléments seront mis en haut de la liste. | string | original / push / unshift | original |
| titles | Titres des listes. | array | — | ['List 1', 'List 2'] |
| button-texts | Textes des boutons. | array | — | [ ] |
| render-content | Fonction de rendu pour les objets. | function(h, option) | — | — |
| format | Textes de statut dans le header. | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | Alias des propriétés des objets source. | object{key, label, disabled} | — | — |
| left-default-checked | Tableau des objets initialement sélectionnés dans la liste de gauche. | array | — | [ ] |
| right-default-checked | Tableau des objets initialement sélectionnés dans la liste de droite. | array | — | [ ] |
### Slot
| Nom | Description |
|------|--------|
| left-footer | Contenu du footer de la liste de gauche. |
| right-footer | Contenu du footer de la liste de droite. |
### Slot avec portée
| Nom | Description |
|------|--------|
| — | Contenu personnalisé pour les objets. Le paramètre est { option }. |
### Méthodes
| Méthode | Description | Paramètres |
| ---- | ---- | ---- |
| clearQuery | Efface le filtre d'une liste. | 'left' / 'right' |
### Events
| Event nom | Description | Paramètres |
|---------- |-------- |---------- |
| change | Se déclenche quand un objet change dans la liste de droite. | Tableau des objets de la liste de droite, direction du transfer (`left` ou `right`), les clés des objets bougés. |
| left-check-change | Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de gauche. | Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé. |
| right-check-change | Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de droite. | Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé. |

155
examples/docs/fr-FR/transition.md Normal file
View File

@@ -0,0 +1,155 @@
## Transitions
Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la [documentation](https://vuejs.org/v2/api/#transition).
### Fade
:::demo Il y a deux effets de fading: `el-fade-in-linear` et `el-fade-in`.
```html
<template>
<div>
<el-button @click="show = !show">Cliquez ici</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
<div v-show="show" class="transition-box">.el-fade-in</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
```
:::
### Zoom
:::demo `el-zoom-in-center`, `el-zoom-in-top` et `el-zoom-in-bottom` sont fournis.
```html
<template>
<div>
<el-button @click="show2 = !show2">Cliquez ici</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-zoom-in-center">
<div v-show="show2" class="transition-box">.el-zoom-in-center</div>
</transition>
<transition name="el-zoom-in-top">
<div v-show="show2" class="transition-box">.el-zoom-in-top</div>
</transition>
<transition name="el-zoom-in-bottom">
<div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show2: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
```
:::
### Collapse
Pour l'effet collapse, utilisez le composant `el-collapse-transition`.
:::demo
```html
<template>
<div>
<el-button @click="show3 = !show3">Cliquez ici</el-button>
<div style="margin-top: 20px; height: 200px;">
<el-collapse-transition>
<div v-show="show3">
<div class="transition-box">el-collapse-transition</div>
<div class="transition-box">el-collapse-transition</div>
</div>
</el-collapse-transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show3: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
```
:::
### À la demande
```js
// fade/zoom
import 'element-ui/lib/theme-chalk/base.css';
// collapse
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)
```

875
examples/docs/fr-FR/tree.md Normal file
View File

@@ -0,0 +1,875 @@
## Tree
Affiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.
### Usage
Voici la structure basique.
:::demo
```html
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: 'Niveau un 1',
children: [{
label: 'Niveau deux 1-1',
children: [{
label: 'Niveau trois 1-1-1'
}]
}]
}, {
label: 'Niveau un 2',
children: [{
label: 'Niveau deux 2-1',
children: [{
label: 'Niveau trois 2-1-1'
}]
}, {
label: 'Niveau deux 2-2',
children: [{
label: 'Niveau trois 2-2-1'
}]
}]
}, {
label: 'Niveau un 3',
children: [{
label: 'Niveau deux 3-1',
children: [{
label: 'Niveau trois 3-1-1'
}]
}, {
label: 'Niveau deux 3-2',
children: [{
label: 'Niveau trois 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
```
:::
### Sélection
Vous pouvez activer la sélection des noeuds.
:::demo cet exemple montre également comment charger des données de manière asynchrone.
```html
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange">
</el-tree>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones'
},
count: 1
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
}
if (node.level > 3) return resolve([]);
var hasChild;
if (node.data.name === 'region1') {
hasChild = true;
} else if (node.data.name === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [{
name: 'zone' + this.count++
}, {
name: 'zone' + this.count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
}
}
};
</script>
```
:::
### Noeud-feuille personnalisés en mode lazy
:::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.
```html
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox>
</el-tree>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
```
:::
### Checkbox désactivées
Les checkbox des noeuds peuvent être désactivées individuellement.
:::demo Dans cet exemple, la propriété `disabled` est ajoutée à `defaultProps`, et certains noeuds ont `disabled:true`. Les checkbox correspondantes sont donc désactivées.
```html
<el-tree
:data="data"
:props="defaultProps"
show-checkbox
@check-change="handleCheckChange">
</el-tree>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: 'Niveau un 1',
children: [{
id: 3,
label: 'Niveau deux 2-1',
children: [{
id: 4,
label: 'Niveau trois 3-1-1'
}, {
id: 5,
label: 'Niveau trois 3-1-2',
disabled: true
}]
}, {
id: 2,
label: 'Niveau deux 2-2',
disabled: true,
children: [{
id: 6,
label: 'Niveau trois 3-2-1'
}, {
id: 7,
label: 'Niveau trois 3-2-2',
disabled: true
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label',
disabled: 'disabled',
},
};
}
};
</script>
```
:::
### Ouverture et sélection par défaut
Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
:::demo Utilisez `default-expanded-keys` et `default-checked-keys` pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que `node-key` est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.
```html
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps">
</el-tree>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: 'Niveau un 1',
children: [{
id: 4,
label: 'Niveau deux 1-1',
children: [{
id: 9,
label: 'Niveau trois 1-1-1'
}, {
id: 10,
label: 'Niveau trois 1-1-2'
}]
}]
}, {
id: 2,
label: 'Niveau un 2',
children: [{
id: 5,
label: 'Niveau deux 2-1'
}, {
id: 6,
label: 'Niveau deux 2-2'
}]
}, {
id: 3,
label: 'Niveau un 3',
children: [{
id: 7,
label: 'Niveau deux 3-1'
}, {
id: 8,
label: 'Niveau deux 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
```
:::
### Sélectionner des noeuds
:::demo Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, `node-key` est requis.
```html
<el-tree
:data="data"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes">Récupération par noeud</el-button>
<el-button @click="getCheckedKeys">Récupération par clé</el-button>
<el-button @click="setCheckedNodes">Sélection par noeud</el-button>
<el-button @click="setCheckedKeys">Sélection par clé</el-button>
<el-button @click="resetChecked">Reset</el-button>
</div>
<script>
export default {
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([{
id: 5,
label: 'Niveau deux 2-1'
}, {
id: 9,
label: 'Niveau trois 1-1-1'
}]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
data() {
return {
data: [{
id: 1,
label: 'Niveau un 1',
children: [{
id: 4,
label: 'Niveau deux 1-1',
children: [{
id: 9,
label: 'Niveau trois 1-1-1'
}, {
id: 10,
label: 'Niveau trois 1-1-2'
}]
}]
}, {
id: 2,
label: 'Niveau un 2',
children: [{
id: 5,
label: 'Niveau deux 2-1'
}, {
id: 6,
label: 'Niveau deux 2-2'
}]
}, {
id: 3,
label: 'Niveau un 3',
children: [{
id: 7,
label: 'Niveau deux 3-1'
}, {
id: 8,
label: 'Niveau deux 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
```
:::
### Contenu personnalisé
Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.
:::demo Il existe deux méthodes de personnalisation: `render-content` et les slots avec portée. Utilisez `render-content` pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à `node` et `data` dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que la démo de `render-content` ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, `render-content` marchera si les dépendances sont satisfaites.
```html
<div class="custom-tree-container">
<div class="block">
<p>Avec render-content</p>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
</div>
<div class="block">
<p>Avec un slot</p>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)">
Ajouter
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
Supprimer
</el-button>
</span>
</span>
</el-tree>
</div>
</div>
<script>
let id = 1000;
export default {
data() {
const data = [{
id: 1,
label: 'Niveau un 1',
children: [{
id: 4,
label: 'Niveau deux 1-1',
children: [{
id: 9,
label: 'Niveau trois 1-1-1'
}, {
id: 10,
label: 'Niveau trois 1-1-2'
}]
}]
}, {
id: 2,
label: 'Niveau un 2',
children: [{
id: 5,
label: 'Niveau deux 2-1'
}, {
id: 6,
label: 'Niveau deux 2-2'
}]
}, {
id: 3,
label: 'Niveau un 3',
children: [{
id: 7,
label: 'Niveau deux 3-1'
}, {
id: 8,
label: 'Niveau deux 3-2'
}]
}];
return {
data: JSON.parse(JSON.stringify(data)),
data: JSON.parse(JSON.stringify(data))
}
},
methods: {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Ajouter</el-button>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Supprimer</el-button>
</span>
</span>);
}
}
};
</script>
<style>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
```
:::
### Filtrage
Les noeuds peuvent être filtrés par mot-clé.
:::demo Utilisez la méthode `filter` de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, `filter-node-method` est requis, sa valeur étant la méthode de filtrage.
```html
<el-input
placeholder="Filter keyword"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
<script>
export default {
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
data() {
return {
filterText: '',
data: [{
id: 1,
label: 'Niveau un 1',
children: [{
id: 4,
label: 'Niveau deux 1-1',
children: [{
id: 9,
label: 'Niveau trois 1-1-1'
}, {
id: 10,
label: 'Niveau trois 1-1-2'
}]
}]
}, {
id: 2,
label: 'Niveau un 2',
children: [{
id: 5,
label: 'Niveau deux 2-1'
}, {
id: 6,
label: 'Niveau deux 2-2'
}]
}, {
id: 3,
label: 'Niveau un 3',
children: [{
id: 7,
label: 'Niveau deux 3-1'
}, {
id: 8,
label: 'Niveau deux 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
```
:::
### Accordéon
Vous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.
:::demo
```html
<el-tree
:data="data"
:props="defaultProps"
accordion
@node-click="handleNodeClick">
</el-tree>
<script>
export default {
data() {
return {
data: [{
label: 'Niveau un 1',
children: [{
label: 'Niveau deux 1-1',
children: [{
label: 'Niveau trois 1-1-1'
}]
}]
}, {
label: 'Niveau un 2',
children: [{
label: 'Niveau deux 2-1',
children: [{
label: 'Niveau trois 2-1-1'
}]
}, {
label: 'Niveau deux 2-2',
children: [{
label: 'Niveau trois 2-2-1'
}]
}]
}, {
label: 'Niveau un 3',
children: [{
label: 'Niveau deux 3-1',
children: [{
label: 'Niveau trois 3-1-1'
}]
}, {
label: 'Niveau deux 3-2',
children: [{
label: 'Niveau trois 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
```
:::
### Noeuds déplaçables
Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggable`.
:::demo
```html
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag">
</el-tree>
<script>
export default {
data() {
return {
data: [{
label: 'Niveau un 1',
children: [{
label: 'Niveau deux 1-1',
children: [{
label: 'Niveau trois 1-1-1'
}]
}]
}, {
label: 'Niveau un 2',
children: [{
label: 'Niveau deux 2-1',
children: [{
label: 'Niveau trois 2-1-1'
}]
}, {
label: 'Niveau deux 2-2',
children: [{
label: 'Niveau trois 2-2-1'
}]
}]
}, {
label: 'Niveau un 3',
children: [{
label: 'Niveau deux 3-1',
children: [{
label: 'Niveau trois 3-1-1'
}]
}, {
label: 'Niveau deux 3-2',
children: [{
label: 'Niveau trois 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === 'Niveau deux 3-1') {
return type !== 'inner';
} else {
return true;
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('Niveau trois 3-1-1') === -1;
}
}
};
</script>
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
| data | Données de l'arbre | array | — | — |
| empty-text | Texte à afficher quand il n'y a pas de données. | string | — | — |
| node-key | Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre. | string | — | — |
| props | Options de configuration, voir table suivante. | object | — | — |
| render-after-expand | Si les noeuds enfants doivent être générés seulement après la première ouverture du parent. | boolean | — | true |
| load | Méthode pour charger les noeuds enfants, uniquement en mode `lazy`. | function(node, resolve) | — | — |
| render-content | Fonction de rendu pour les noeuds. | Function(h, { node, data, store } | — | — |
| highlight-current | Si le noeud courant est mis en valeur. | boolean | — | false |
| default-expand-all | Si tous les noeuds sont ouverts par défaut. | boolean | — | false |
| expand-on-click-node | Si l'ouverture se fait aussi en cliquant sur le noeud. Si `false`, l'ouverture ne se fera qu'en cliquant sur l'icône. | boolean | — | true |
| check-on-click-node | Si la sélection se fait aussi en cliquant sur le noeud. Si `false`, la sélection ne se fera qu'en cliquant sur la checkbox. | boolean | — | false |
| auto-expand-parent | Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre. | boolean | — | true |
| default-expanded-keys | Tableau des clés des noeuds initialement ouverts. | array | — | — |
| show-checkbox | Si un noeud est sélectionnable. | boolean | — | false |
| check-strictly | Si la sélection d'un noeud affecte celle de son parent quand `show-checkbox` est `true`. | boolean | — | false |
| default-checked-keys | Tableau des clés des noeuds initialement sélectionnés. | array | — | — |
| current-node-key | Clé du noeud initialement sélectionné. | string, number | — | — |
| filter-node-method | Fonction exécutée sur chaque noeud pour le filtrage. Si elle retourne `false`, les noeuds seront cachés. | Function(value, data, node) | — | — |
| accordion | Si les noeuds fonctionnent en mode accordéon. | boolean | — | false |
| indent | Indentation horizontale des noeuds en px. | number | — | 16 |
| icon-class | Icône pour chaque noeud. | string | - | - |
| lazy | Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut `load`. | boolean | — | false |
| draggable | Si les noeuds sont déplaçables par drag'n drop. | boolean | — | false |
| allow-drag | Fonction exécutée avant le déplacement d'un noeud. Si `false` est retourné, le noeud ne sera pas déplaçable. | Function(node) | — | — |
| allow-drop | Fonction exécutée avant le placement d'un noeud. Si `false` est retourné, le noeud ne pourra être placé sur la zone en question. `type` a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible). | Function(draggingNode, dropNode, type) | — | — |
### props
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --------- | ---------------------------------------- | ------ | --------------- | ------- |
| label | Détermine quelle clé de l'objet noeud représente le label. | string, function(data, node) | — | — |
| children | Détermine quelle clé de l'objet noeud représente les noeuds enfants. | string | — | — |
| disabled | Détermine quelle clé de l'objet noeud représente la désactivation du noeud. | boolean, function(data, node) | — | — |
| isLeaf | Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading. | boolean, function(data, node) | — | — |
### Méthodes
`Tree` possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.
| Méthode | Description | Paramètres |
| --------------- | ---------------------------------------- | ---------------------------------------- |
| filter | Filtre les noeuds. | Accepte un paramètre qui sera le premier paramètre de `filter-node-method`. |
| updateKeyChildren | Ajoute de nouvelles données au noeud, ne marche que lorsque `node-key` est assigné. | (key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données. |
| getCheckedNodes | Si le noeud peut-être sélectionné (`show-checkbox` est `true`), il retourne un tableau des noeuds sélectionnés. | (leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à `false`. Si `true`, retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à `false`. Si `true`, retourne la moitié des noeuds sélectionnés. |
| setCheckedNodes | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | Un tableau de noeuds qui doivent être sélectionnés. |
| getCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne un tableau de clés des noeuds sélectionnés. | (leafOnly) Booléen, défaut à `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
| setCheckedKeys | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | (keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
| setChecked | Détermine si un noeud est sélectionnable, ne marche que si `node_key` est assigné. | (key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond. |
| getHalfCheckedNodes | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne la moitié des noeuds sélectionnés. | - |
| getHalfCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne les clés de la moitié des noeuds sélectionnés. | - |
| getCurrentKey | retourne la clé du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
| getCurrentNode | retourne les données du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
| setCurrentKey | Met un noeud en valeur par sa clé, ne marche que si `node_key` est assigné. | (key) la clé du noeud. Si `null`, annule la sélection actuelle. |
| setCurrentNode | Met un noeud en valeur, ne marche que si `node_key` est assigné. | (node) le noeud. |
| getNode | Retourne le noeud grâce à sa clé ou ses données. | (data) la clé ou les données du noeud. |
| remove | Supprime un noeud, ne marche que si node-key est assigné. | (data) le noeud ou ses données à supprimer. |
| append | Ajoute un noeud à un autre noeud. | (data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données. |
| insertBefore | Insère un noeud avant un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |
| insertAfter | Insère un noeud après un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |
### Évènements
| Nom | Description | Paramètres |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| node-click | Se déclenche quand est cliqué. | Le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |
| node-contextmenu | Se déclenche quand un noeud reçoit un clic droit. | L'évènement, le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |
| check-change | Se déclenche quand quand la sélection d'un noeud change. | Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés. |
| check | Se déclenche après un clic sur le checkbox. | Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys. |
| current-change | Se déclenche quand le noeud courant changes. | Le noeud courant, la propriété `node` de TreeNode |
| node-expand | Se déclenche quand le noeud courant s'ouvre. | Le noeud ouvert, la propriété `node` de TreeNode, TreeNode lui-même. |
| node-collapse | Se déclenche quand le noeud courant se ferme. | Le noeud fermé, la propriété `node` de TreeNode, TreeNode lui-même. |
| node-drag-start | Se déclenche quand le déplacement commence. | Le noeud déplacé, l'évènement. |
| node-drag-enter | Se déclenche quand le noeud déplacé entre dans un autre noeud. | Le noeud déplacé, l'autre noeud, l'évènement. |
| node-drag-leave | Se déclenche quand le noeud déplacé quitte un autre noeud. | Le noeud déplacé, l'autre noeud, l'évènement. |
| node-drag-over | Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover). | Le noeud déplacé, l'autre noeud, l'évènement. |
| node-drag-end | Se déclenche quand le déplacement se termine. | Le noeud déplacé, le noeud d'arrivée (peut-être `undefined`), le type de placement (before / after / inner), l'évènement. |
| node-drop | Se déclenche après que le noeud déplacé soit placé. | Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement. |
### Slot avec portée
| Nom | Description |
|------|--------|
| — | Le contenu personnalisé des noeuds. les paramètres sont { node, data }. |

152
examples/docs/fr-FR/typography.md Normal file
View File

@@ -0,0 +1,152 @@
<script>
import bus from '../../bus';
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
const varMap = [
'$--font-size-extra-large',
'$--font-size-large',
'$--font-size-medium',
'$--font-size-base',
'$--font-size-small',
'$--font-size-extra-small'
];
const original = {
'font_size_extra_large': '20px',
'font_size_large': '18px',
'font_size_medium': '16px',
'font_size_base': '14px',
'font_size_small': '13px',
'font_size_extra_small': '12px'
}
export default {
created() {
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
'font_size_extra_large': '',
'font_size_large': '',
'font_size_medium': '',
'font_size_base': '',
'font_size_small': '',
'font_size_extra_small': ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
varMap.forEach((v) => {
const key = v.replace('$--', '').replace(/-/g, '_')
if (value[v]) {
this[key] = value[v]
} else {
this[key] = original[key]
}
});
}
}
},
}
</script>
## Typographie
Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.
### Police
<div class="demo-term-box">
<img src="../../assets/images/term-pingfang.png" alt="">
<img src="../../assets/images/term-hiragino.png" alt="">
<img src="../../assets/images/term-microsoft.png" alt="">
<img src="../../assets/images/term-sf.png" alt="">
<img src="../../assets/images/term-helvetica.png" alt="">
<img src="../../assets/images/term-arial.png" alt="">
</div>
### Convention des polices
<table class="demo-typo-size">
<tbody>
<tr
>
<td>Level</td>
<td>Font Size</td>
<td class="color-dark-light">Demo</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_small }"
>
<td>Supplementary text</td>
<td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_small }"
>
<td>Body (small)</td>
<td class="color-dark-light">{{font_size_small}} Small</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_base }"
>
<td>Body</td>
<td class="color-dark-light">{{font_size_base}} Base</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_medium }"
>
<td >Small Title</td>
<td class="color-dark-light">{{font_size_medium}} Medium</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_large }"
>
<td>Title</td>
<td class="color-dark-light">{{font_size_large}} large</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_large }"
>
<td>Main Title</td>
<td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
<td>Build with Element</td>
</tr>
</tbody>
</table>
### Font Line Height
<div>
<img class="lineH-left" src="~examples/assets/images/typography.png" />
<ul class="lineH-right">
<li>line-height:1 <span>No line height</span></li>
<li>line-height:1.3 <span>Compact</span></li>
<li>line-height:1.5 <span>Regular</span></li>
<li>line-height:1.7 <span>Loose</span></li>
</ul>
</div>
### Font-family
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```

386
examples/docs/fr-FR/upload.md Normal file
View File

@@ -0,0 +1,386 @@
## Upload
Permet d'uploader des fichiers en cliquant ou en les déplaçant sur le composant.
### Cliquer pour envoyer
:::demo Personnalisez le bouton d'envoi avec `slot`. Utilisez `limit` et `on-exceed` pour limiter le nombre maximal de fichiers et déterminer le comportement quand ce nombre est dépassé. De plus, vous pouvez annuler la suppression d'un fichier avec `before-remove`.
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">Cliquer pour envoyer</el-button>
<div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`La limite est 3, vous avez choisi ${files.length} fichiers, soit ${files.length + fileList.length} au total.`);
},
beforeRemove(file, fileList) {
return this.$confirm(`Supprimer le transfert de ${ file.name } ?`);
}
}
}
</script>
```
:::
### Envoi d'avatar utilisateur
Utilisez `before-upload` pour restreindre le format et la taille du fichier à envoyer.
:::demo
```html
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('L\'avatar doit être en JPG !');
}
if (!isLt2M) {
this.$message.error('L\'avatar ne peut pas excéder 2Mb !');
}
return isJPG && isLt2M;
}
}
}
</script>
```
:::
### Mur de photos
Utilisez `list-type` pour changer le style de la liste de fichiers.
:::demo
```html
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
```
:::
### Custom file thumbnail
Use `scoped-slot` to change default thumbnail template.
:::demo
```html
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
disabled: false
};
},
methods: {
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
}
}
}
</script>
```
:::
### Liste de fichiers avec miniatures
:::demo
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">Cliquer pour envoyer</el-button>
<div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>
```
:::
### Contrôle de la liste de fichiers
Utilisez `on-change` pour contrôler le comportement de la liste de fichiers.
:::demo
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:file-list="fileList">
<el-button size="small" type="primary">Cliquer pour envoyer</el-button>
<div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}, {
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}]
};
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList.slice(-3);
}
}
}
</script>
```
:::
### Envoi en déposant
Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.
:::demo
```html
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>
<div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
</el-upload>
```
:::
### Envoi manuel
:::demo
```html
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">Choisir un fichier</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Envoyer au serveur</el-button>
<div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
</el-upload>
<script>
export default {
methods: {
submitUpload() {
this.$refs.upload.submit();
}
}
}
</script>
```
:::
### Attributs
Attribut | Description | Type | Valeurs acceptées | Défaut
----| ----| ----| ----| ----
action | Requis, l'url de requête. | string | — | —
headers | Les headers de la requête. | object | — | —
multiple | Si envoyer de multiples fichiers est autorisé. | boolean | — | —
data | Options additionnelles de la requête. | object | — | —
name | Identifiant du fichier. | string | — | file
with-credentials | Si les cookies sont aussi envoyés. | boolean | — |false
show-file-list | Si la liste des fichiers est affichée. | boolean | — | true
drag | Si le mode drag'n drop est activé. | boolean | — | false
accept | [Types de fichiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) acceptés, ne marche pas si `thumbnail-mode` est `true`. | string | — | —
on-preview | Fonction pour quand le fichier est cliqué. | function(file) | — | —
on-remove | Fonction pour quand des fichiers sont supprimés. | function(file, fileList) | — | —
on-success | Fonction pour quand l'upload a réussi. | function(response, file, fileList) | — | —
on-error | Fonction pour quand l'upload renvoi une erreur. | function(err, file, fileList) | — | —
on-progress | Fonction pour quand l'upload est en cours. | function(event, file, fileList) | — | — |
on-change | Fonction pour quand le statut d'un fichier change (sélection, upload, erreur...). | function(file, fileList) | — | — |
before-upload | Fonction pour avant l'upload. Si `false` est retourné ou une `Promise` qui est ensuite rejetée, l'envoi sera annulé. | function(file) | — | —
before-remove | Fonction pour avant la suppression de fichiers. Si `false` est retourné ou une `Promise` qui est ensuite rejetée, la suppression sera ensuite annulée. | function(file, fileList) | — | — |
thumbnail-mode | Si les miniatures sont affichées. | boolean | — | false
file-list | Les fichiers envoyé par défaut, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
list-type | Le type de liste de fichiers. | string | text/picture/picture-card | text |
auto-upload | Si l'envoi est automatique. | boolean | — | true |
http-request | Écrase le xhr par défaut, afin que vous puissiez implémenter votre propre fonction d'envoi. | function | — | — |
disabled | Si le composant est désactivé. | boolean | — | false |
limit | Nombre maximum d'envoi autorisés. | number | — | — |
on-exceed | Fonction pour quand la limite d'envoi est dépassée. | function(files, fileList) | — | - |
### Slot
| Nom | Description |
|------|--------|
| trigger | Le contenu qui déclenche le Dialog du fichier. |
| tip | Le contenu des tips. |
### Méthodes
| Méthode | Description | Paramètres |
|---------- |-------- |---------- |
| clearFiles | Efface la liste (non supporté dans `before-upload`). | — |
| abort | Annule l'envoi en cours. | （ file: fileList's item ） |
| submit | Envoi la liste de fichiers manuellement. | — |