I18n: French translation (#12153)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* Docs: update the configuration for the french translation

* Docs: update the french documentation from 2.4.4 to 2.4.11

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

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

* Changelog: update from 2.4.11 to 2.5.4

* Doc: update french translation from 2.4.11 to 2.5.4

* Changelog: fix a display bug with the subtitles

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

* Doc: change some french titles

* Doc: add the french locale to app.vue

.gitignore

@@ -15,6 +15,7 @@ examples/element-ui
 examples/pages/en-US
 examples/pages/zh-CN
 examples/pages/es
+examples/pages/fr-FR
 fe.element/element-ui
 .npmrc
 coverage

CHANGELOG.fr-FR.md

@@ -0,0 +1,873 @@
+## Changelog
+
+### 2.5.4
+
+*2019-02-01*
+
+#### Corrections de bugs
+
+- Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282)
+
+### 2.5.3
+
+*2019-01-31*
+
+#### Optimisation
+
+- Optimisation du code de Message (par @vok123 dans #14029)
+- Suppression des gh-pages (par @ziyoung dans #14266)
+- Ajout du lien IssueHunt (par @island205 dans #14261)
+
+#### Corrections de bugs
+
+- Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242)
+- Correction du style du TabBar actif (par @iamkun dans #14240)
+- Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253)
+
+### 2.5.2
+
+*2019-01-27*
+
+#### Optimisation
+- Docs:
+  - Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231)
+
+#### Corrections de bugs
+- Build:
+  - Suppression des commentaires non supprimés dans le module umd `lib/index.js` (par @island205 dans #14233)
+  - Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232)
+  - Correction des problèmes de build 2.5.1 (par @iamkun dans #14228)
+
+### 2.5.1
+
+*2019-01-26*
+
+#### Optimisation
+- DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211)
+- Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217)
+
+#### Corrections de bugs
+- Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220)
+- Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222)
+
+### 2.5.0
+
+*2019-01-25*
+
+#### Nouvelles fonctionnalités
+- DatePicker
+  - Ajout de l'attribut `validate-event` (par @ziyoung dans #13531)
+- DateTimePicker
+  - `pickerOptions` supporte l'option `selectableRange` (par @eeeeeeeeeeeason)
+- Tag
+  - Ajout de l'événement `click` (par @licdream dans #14106)
+- I18n
+  - Support de la langue kirghize (par @zzjframework dans #14174)
+
+#### Optimisation
+- Mise à niveau vers webpack@4 (par @jikkai dans #14173)
+- Input
+  - Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471)
+- Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773)
+
+#### Corrections de bugs
+- Autocomplete
+  - Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung)
+  - Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang)
+- Carrousel
+  - Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman)
+- Cascader
+  - Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun)
+  - Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet)
+  - Correction de l'icône couvrant le texte (#13596) (par @ziyoung)
+- Checkbox
+  - Refonte du style (par @PanJiaChen)
+- DatePicker
+  - Ajout d'un `key` de v-for manquant dans TimeSpinner (#13547) (par @Ende93)
+  - Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91)
+- Input
+  - Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205)
+- Pagination
+  - La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman)
+- Popover
+  - Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko)
+  - Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite)
+- Radio
+  - Refonte du style (par @ohhhoney1)
+- Table
+  - Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1)
+  - Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy)
+  - Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa)
+  - Correction du problème d'affichage `show-summary` lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao)
+- Tabs
+  - Correction d'un bug de défilement automatique (#13696) (par @iamkun)
+  - Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun)
+  - Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun)
+- Tree
+  - Correction de la propriété `showCheckbox` sur `Tree` qui ne pouvait pas affecter leurs `tree-node` enfants(par @KidneyFlower)
+  - Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung)
+- Upload
+  - Ajout de le propriété `url` au fichier uploadé lorsque `list-type` est modifié (#13771) (par @elfman)
+- Slider
+  - Correction de l'indentation du code source (#13955) (par @wacky6)
+- I18n
+  - Ajout des traductions manquantes en catalan (par @jaumesala)
+  - Ajout de la traduction russe manquante (#13658) (par @justlp)
+  - Correction des traductions en finnois (#14137) (par @jenkrisu)
+- Doc
+  - Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310)
+- Autres
+  - Suppression d'un script inutile (par @ziyoung)
+  - Correction des ancres (#13753) (par @iamkun)
+  - Correction de l'incohérence des majuscules dans la documentation (par @wonderjar)
+  - Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun)
+  - Ajout des logs yarn au .gitignore (#13922) (par @mimimi)
+  - Suppression du sponsor duotai (#14156) (par @island205)
+  - Mise à jour du QR code dans le readme (#13960) (par @iamkun)
+  - Mise à jour du lien CDN, correction d'une typo (par @ziyoung)
+
+### 2.4.11
+
+*2018-11-21*
+
+- Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478
+- Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712)
+
+### 2.4.10
+
+*2018-11-16*
+
+- Correction des clics multiples sur Select pour afficher la liste déroulante, #13268
+- L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208
+- Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen)
+- Ajout de l'attribut `loop` dans le composant Carrousel, #13217
+- Lorsque les données de Table changent, la ligne en surbrillance reste, #13200
+- Le slot du header de Table peut recevoir des paramètres, #13263
+- La méthode `clearFilter` de Table peut recevoir des arguments, #13176
+- La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun)
+- Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278
+- ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299
+- InputNumber: ajout de la méthode `select`, #13286 (par @st-sloth)
+- AutoComplete: ajout de l'événement `clear`, #12171(par arthurdenner) #13326
+- Vous pouvez fermer Menu en cliquant à l'extérieur, #13296
+- La méthode `validateField` du formulaire peut recevoir des arguments, #13319
+- Cascader: ajout de l'événement `visible-change`, #13415
+- DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm)
+- Tree: ajout des propriétés `iconClass` et `currentNodeKey`, #13337 #13197 (par @isnifer)
+- Progress: ajout du texte de statut #13198 (par @ali-master)
+- Correction de `defaultCheckedKeys` de Tree, #13349 (par @dive2Pro)
+
+### 2.4.9
+
+*2018-10-26*
+
+- Le paramètre `clearValidate` de Form supporte les strings #12990 (par @codinglobster)
+- Ajout de l'attribut `type` pour Badge, #12991
+- Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel)
+- Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU)
+- Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat)
+- Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh)
+- Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070
+- La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat)
+- Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039
+- Correction d'un problème d'affichage du label TabNav, #13178
+- Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl)
+- Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman)
+- Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987
+- Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052
+
+### 2.4.8
+
+- Ne pas afficher le contour lorsque le Switch est focus, #12771
+- Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox)
+- Ajout d'un événement d'ouverture pour Dialog, #12828
+- Correction de l'ordre d'affichage incorrect de TabNav, #12846
+- Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948
+- Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854
+- Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf).
+- Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898
+- Correction d'un problème avec l'attribut `render-header` de l'en-tête de table qui ne fonctionnait pas, #12914
+
+### 2.4.7
+
+*2018-09-14*
+
+- Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348
+- Correction des erreurs lancées par DatePicker en mode multiple, #12347
+- Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali)
+- Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer)
+- Correction du champ non-subrillant dans Cascader, #12341
+- Correction d'un mauvais ordre de Tabpane, #12346
+- Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy)
+- Correction du style de SubMenu, #2457
+- Correction de la surbrillance après la sélection de SubMenu, #12479
+- Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang)
+- Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525
+- Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530
+- Correction des filtres de table non-affichés, #12539
+- Correction de l'arbre incapable de supprimer des nœuds, #12684
+- Correction de la hauteur de Select Input changeant en mode simple, #12719
+- Correction d'un style du label de FormItem sous forme imbriquée, #12748
+- Ajout de l'attribut `autocomplete` pour Input, `auto-complete` devenant obsolète, #12514 (par @axetroy)
+- Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf)
+
+### 2.4.6
+
+*2018-08-09*
+
+- Correction de Table n'affichant pas l'icône de filtre lorsque `filters` est un tableau vide, #12165
+- Correction de Menu ne sauvegardant pas l'état actif lorsque `collapse` change, #12178 (par @elfman)
+- Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248
+- Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262
+- Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est `undefined`, #12322
+- Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181
+- Correction du mot-clé de la requête Select disparaissant en mode multi, #12304
+- Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203
+- Correction de l'affichage incorrect de Main sur IE, #12237
+- Correction de Input déclenchant deux validations de formulaire, #12260
+- Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256
+- Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279
+- Correction du Popover non-visible quand InputNumber a le focus, #12284
+- Ajout de l'attribut `popper-append-to-body` pour Autocomplete, #12241
+- Ajout du support du modificateur `sync` pour l'attribut `page-size` de Pagination, #12281
+
+### 2.4.5
+
+*2018-07-26*
+
+- Correction du réglage de Table `class-name` qui ne fonctionne pas pour les colonnes `expand`, #12006
+- Ajout de la méthode `toggleAllSelection` pour Table, #12047
+- Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108
+- Correction de `line-height` de l'option impossible à régler, #12120
+- Correction de TimeSelect avec la valeur par défaut `null` ne pouvant être assigné après avoir exécuté `resetField`, #12010
+- Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008
+- Correction d'un nœud parent vérifié en mode lazy, #12106
+- Ajout du paramètre `includeHalfChecked` pour getCheckedNodes de Tree, #12014
+
+### 2.4.4
+
+*2018-07-13*
+
+- Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837
+- Correction d'une mauvaise position du slot `suffix` de Input lorsque le slot `suffixe` est avec le slot `append`, #11951
+- Correction de Input affichant toujours l'icône clear même en lecture seule, #11967
+- Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847
+- Correction des `default-checked-keys` qui ne fonctionnait pas, #11971
+- Correction de `empty-text` non visible lorsque le noeud de Tree est filtré, #11971
+- Correction de la position du `empty-text` surdimensionné dans Table, #11965
+- Correction de la surbrillance de la ligne de Table lorsque `current-row-key` est assignée à `null`, #11866
+- Correction de l'affichage de la liste déroulante des filtres lorsque `filters` est un tableau vide, #11864
+- Correction du label de Radio qui n'arrête pas la propagation des événements, #11912
+
+### 2.4.3
+
+*2018-07-03*
+
+- Correction de `allow-drop` qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797
+- Maintenant vous pouvez passer un paramètre à la méthode `clearValidate` du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821
+- Ajout de l'attribut `distinguishCancelAndClose` pour MessageBox, #11831
+
+### 2.4.2
+
+*2018-06-26*
+
+- Maintenant `class-name` et `label-class-name` de Table sont réactifs, #11626
+- Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque `highlight-current-row` était `false`, #11646
+- Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton `round` ou `circle`, #11605
+- Correction du style du Select de Pagination, #11622
+- Correction de la méthode `open` du menu quand `collapse` est dynamiquement changé, #11646
+- Ajout des paramètres `activeName` et `oldActiveName` au hook before-leave de Tabs, #11713
+- Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588
+- Correction de Cascader ne se fermant pas quand l'option est cliquée quand `change-on-select` est `true`, #11623
+- La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672
+
+### 2.4.1
+
+*2018-06-08*
+
+- Suppression du duplicata de la déclaration de type pour Autocomplete, #11388
+- Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427
+- Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est `null`, #11460
+- Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462
+- Ajout de l'attribut `iconClass` pour MessageBox, #11499
+- Ajout de l'attribut `stretch` pour Tabs, #11476
+- Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est `lazy`, #11461
+- Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464
+- Correction de l'état de la mise au point lorsque `before-leave` renvoie une promesse résolue, #11386
+- Correction de la désactivation du Popover qui créait encore des poppers, #11426
+- Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf)
+- Ajout de l'événement `closed` pour Dialog, #11490
+
+### 2.4.0 Fullerene
+
+*2018-05-28*
+
+#### Nouvelles fonctionnalités
+- Général
+  - L'outil de développement et le bundler sont basculés vers le webpack natif, #11216
+  - Vous pouvez maintenant définir globalement l'index z initial des popups, #11257
+- Autocomplete
+  - Ajout de l'attribut `hide-loading`, #11260
+- Button
+  - Vous pouvez maintenant utiliser l'attribut `size` sur les boutons circulaires pour contrôler leur taille, #11275
+- InputNumber
+  - Ajout de l'attribut `precision`, #11281
+- Tabs
+  - Ajout de l'attribut `before-leave`, #11259
+  - Ajout de l'attribut `lazy`, #11167（by @Kingwl）
+- Table
+  - Ajout de la méthode `sort` pour trier manuellement la table, #11311
+
+#### Corrections de bugs
+- Input
+  - Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter)
+- Popover
+  - Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265
+- Breadcrumb
+  - Correction de l'attribut `to` ne supportant pas la mise à jour dynamique, #11286
+- Upload
+  - Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode `beforeUpload`, #11297 (par @qusiba)
+- Infobulle
+  - Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335
+- Autocomplete
+  - Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323
+- ColorPicker
+  - Correction d'un événement `active-change` se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304
+- Table
+  - Correction d'une erreur de style du panneau de filtre surdimensionné, #11314
+  - Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348
+- Checkbox
+  - Correction d'une checkbox unique ne supportant pas la validation, #11271
+- Radio
+  - Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303
+- MessageBox
+  - Correction de la classe `el-popup-parent-hidden` qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371
+
+### 2.3.9
+
+*2018-05-18*
+
+- Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut `prop` d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137
+- L'attribut `lockScroll` des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114
+- Correction de l'icône de Progression qui ne s'affichait pas quand son `status` était une exception, #11172
+- Correction de l'attribut `désactivé` qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185
+- Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186
+- `setCurrentKey` de Tree accepte maintenant `null` comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205
+
+### 2.3.8
+
+*2018-05-11*
+
+- Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand `type` est dates, #10973
+- Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912
+- Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement `change`, #11017
+- Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058
+- Ajout du slot nommé `préfixe` pour Select, #11063
+- Ajout de la méthode `clearValidate` pour FormItem, #11076
+- Ajout de l'attribut `checkOnClickNode` pour Tree, #1111111
+
+### 2.3.7
+
+*2018-04-29*
+
+- Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834
+- Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est `null`, #10912
+- Correction d'un déclencheur incorrect de l'événement `active-change` après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell)
+- Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945
+
+### 2.3.6
+
+*2018-04-21*
+
+- Correction d'un comportement incorrect du callback `allow-drop` de Tree lorsque le paramètre `type` est utilisé, #10821
+- Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822
+- Correction d'un Select simple déclenchant incorrectement un événement `blur` après avoir cliqué sur une option, #10822
+
+### 2.3.5
+
+*2018-04-20*
+
+- Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque `type` est la semaine, #10712
+- Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714
+- Ajout de l'attribut `automatic-dropdown` pour Select, #10042 (par @Seebiscuit)
+- Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou)
+- L'attribut `type` de DatePicker peut être `dates`, où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256)
+- Ajout des événements `prev-click` et `next-click` pour Pagination, #10755
+- Ajout de l'attribut `pager-count` pour Pagination, #10493 (par @chongjohn716)
+- Ajout de `type` comme 3ème paramètre de l'attribut `allow-drop` de Tree, #10792
+- Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779
+
+### 2.3.4
+
+*2018-04-12*
+
+- Suppression du double de l'attribut `showTimeout` dans la déclaration TypeScript de SubMenu, #10566 (par @kimond)
+- Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577
+- Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement `current-current-change`, #10628
+- Correction de Textarea affichant `undefined` dans le SSR lorsque sa valeur n'est pas définie, #10630
+- Correction de la désactivation du style TabItem lorsque `type` est border-card, #10640
+- Ajout de `$index` comme quatrième paramètre du `formatter` de la Table, #10645
+- Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666
+
+### 2.3.3
+
+*2018-04-04*
+
+- Ajout de l'attribut `shadow` pour Card, #10418 (par @YunYouJun)
+- Correction de Badge masqué lorsque `value` est `0`, #10470
+- Correction de quelques bugs de Tree, #10474 #10494
+- Ajout de `placement` pour Autocomplete, #10475
+- L'attribut `default-time` fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk)
+- Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503
+- Ajout de l'attribut `popper-append-to-body` pour SubMenu, #10515
+- Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551
+- Correction de l'événement `change` d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553
+
+### 2.3.2
+
+*2018-03-29*
+
+- Correction d'une régression d'Autocomplete, #10442
+
+### 2.3.1
+
+*2018-03-29*
+
+- Correction d'une régression de `type` d'Inputqui n'était pas transmis à l'élément natif, #10415
+- Ajout de la méthode `blur` pour Select, #10416
+
+#### 2.3.0 Diamant
+
+*2018-03-28*
+
+#### Nouvelles fonctionnalités
+- Table
+  - Maintenant le `formatter` de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman)
+  - Ajout de l'attribut `select-on-indeterminate`, #9924 (par @syn-zeta)
+- Menu
+  - Ajout de l'attribut `collapse-transition`, #8809 (par @limichange)
+- Input
+  - Ajout de la méthode `select`, #10229
+  - Ajout de la méthode `blur`, #10356
+- ColorPicker
+  - Ajout de l'attribut `predefine`, #10170 (par @elfman)
+- Tree
+  - Ajout des attributs `draggable`, `allow-drop` et `allow-drag`, et `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-leave`, `node-drag-over`, `node-drag-end` et `node-drop`, #9251 #10372 (par @elfman)
+- Form
+  - La méthode `validate` a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279
+  - Ajout de l'événement `validate`, #10351
+- Progress
+  - Ajout de l'attribut `color`, #10352 (par @YunYouJun)
+- Button
+  - Ajout de l'attribut `circle`, #10359 (par @YunYouJun)
+
+#### Corrections de bugs
+- Form
+  - Correction du label de FormItem non aligné avec l'Input mixte, #10189
+- Menu
+  - Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot `title` de l'élément MenuItem est défini, #10193 (par @PanJiaChen).
+- Pagination
+  - Correction d'un événement `current-current-change` qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247
+- DatePicker
+  - Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut `format`, #10174（by @remizovvv）
+- Upload
+  - Correction de l'attribut `accept` qui ne fonctionnait pas quand `drag` est vrai, #10278
+
+### 2.2.2
+
+*2018-03-14*
+
+- Ajout de l'événement `clear` pour Input, #9988 (par @blackmiaool)
+- Maintenant la saisie manuelle de ColorPicker supporte les modes `hsl`, `hsv` et `rgb`, #9991
+- Correction de DatePicker ne déclenchant pas l'événement `change` lorsque sa valeur initiale est effacée, #9986
+- Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003
+- Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si `max-height` est réglé, #10034
+- Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme)
+- Ajout de l'attribut `désactivé` pour Pagination, #10006
+- Ajout des événements `after-enter` et `after-leave` pour Popover, #10047
+- Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté `resetFields` du formulaire, #10105
+- Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130
+- Correction de MessageBox héritant de l'attribut `title` de son instance précédente lorsqu'il était appelé sans `title`, #10126 (par @Pochodaydaydayup)
+- Ajout de l'attribut `input-size` pour Slider, #10154
+- Ajout des événements `left-check-change` et `right-check-change` pour Transfer, #10156
+
+### 2.2.1
+
+*2018-03-02*
+
+- Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812
+- Correction de Table avec un attribut `height` qui ne rendait pas dans SSR, #9876
+- Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848
+- Correction d'un événement `change` qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913
+- Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks)
+- Ajout de l'attribut `tooltip-class` pour Slider, #9957
+- Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit)
+- Ajout de l'attribut `target-order` pour Transfer, #9960
+
+### 2.2.0 Graphite
+
+*2018-02-12*
+
+#### Nouvelles fonctionnalités
+- Menu
+  - Ajout des attributs `popper-class` et `disabled` pour le sous-menu, #9604 #9771
+  - Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741
+- Tree
+  - Ajout de l'évènement `node-contextmenu`, #9678
+  - Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686
+  - Ajout des méthodes `getNode`, `remove`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedNodes`, `getHalfCheckedKeys` et de l'événement `check`, #9718 #9730
+- Transfer
+  - Ajout de la méthode `clearQuery`, #9753
+- Select
+  - Ajout de l'attribut `popper-append-to-body`, #9782
+
+#### Corrections de bugs
+- Table
+  - Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement `row-click`, #9654
+  - Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668
+  - Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667
+- Container
+  - Les composants fixes de Container ne s'étirent pas dans IE11, #9655
+- Loading
+  - Correction du chargement n'apparaissant pas lorsque la valeur de `v-loading` est changée en true dans le hook `mounted`, #9722
+- Switch
+  - Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760
+
+### 2.1.0 Charcoal
+
+*2018-01-31*
+
+#### Nouvelles fonctionnalités
+- Cascader
+  - Ajout des événements `focus` et `blur`, #9184 (par @viewweiwu)
+- Table
+  - La méthode `filter-method` a maintenant un troisième paramètre `column`, #9196 (par @liyanlong)
+- DatePicker
+  - Ajout des attributs `prefix-icon` et `clear-icon`, #9237 (par @AdamSGit)
+  - Ajout de l'attribut `default-time`, #9094 (par @nighca)
+  - Le format `value-format` supporte maintenant `timestamp`, #9319 (par @wacky6)
+- InputNumber
+  - Maintenant la valeur liée peut être `undefined`, #9361
+- Select
+  - Ajouté l'attribut `auto-complete`, #9388
+- Form
+ - Ajout de l'attribut `désactivé`, #9529
+ - Ajout de l'attribut `validateOnRuleChange`, #8141
+- Notification
+  - Ajout de la méthode `closeAll`, #9514
+
+#### Corrections de bugs
+- InputNumber
+  - Correstion du reset lors de la saisie du point des nombres décimaux, #9116
+- Dropdown
+  - Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei)
+- Table
+  - Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac）
+  - Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326
+  - Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327
+  - Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462
+  - Correction de rendus multiples inutiles dans certaines conditions, #9426
+  - Correction d'une erreur de calcul de la largeur de colonne lors de la modification de `width` de TableColumn, #9426
+- Loading
+  - Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313
+- DatePicker
+  - Correction de la méthode `focus` qui ne fonctionnait pas en mode "range", #9437
+  - Correction du clic sur le bouton "now" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6)
+  - Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6)
+- Steps
+  - Correction d'une erreur de style dans IE 11, #9454
+
+#### Changements
+- Menu
+  - Le menu contextuel en mode `collapse` s'ajoute maintenant directement à `body`, de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263
+- Table
+  - Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement `row-click`, #9467
+- Loading
+  - Le `z-index` du masque de chargement non plein écran est changé à 2000. Le `z-index` du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522
+- Dropdown
+  - Les attributs `show-timeout` et `hide-timeout` ne fonctionnent maintenant que lorsque le déclencheur est `hover`, #9573
+
+### 2.0.11
+
+*2018-01-08*
+
+- Correction d'un problème de couleur de bordure de Select dans les slots `prepend` ou `append` de Input, #9089
+- Correction du paramètre `remove-tag` de l'événement Select, #909090
+- Ajout des attributs `show-timeout` et `hide-timeout` pour le sous-menu, #8934 (par @HugoLew)
+- Correction d'un style Tooltip manquant de `show-overflow-tooltip` lors de l'importation de Table sur demande, #9130
+- Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de `clearSort` sur cette colonne, #9100 (par @zEmily)
+- Le fichier de configuration i18n pour le tchèque est renommé de `cz` en `cs-CZ`, #9164
+
+### 2.0.10
+
+*2017-12-29*
+
+- Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026
+- Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028
+- Maintenant, DatePicker n'émet que l'événement `change` quand la valeur est vraiment changée, #9029 (par @remizovvvv)
+- Ajout de l'attribut `tabindex` pour Input, #9041 (par @dicklwm)
+
+### 2.0.9🎄
+
+*2017-12-24*
+
+- Ajouté la fonction de hook "avant suppression" pour Upload, #8788 (par @firesh)
+- Correction de la valeur initiale de `error` qui ne fonctionnait pas pour FormItem, #8840
+- La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut `element-loading-custom-class`, #8826 (par @earlymeme)
+- Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921
+- Ajout de l'attribut `renderAfterExpand` pour Tree, #8972
+
+### 2.0.8
+
+*2017-12-12*
+
+- Ajout de la documentation en espagnol
+- Correction du `show-timeout` de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten)
+- Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776
+- Correction d'un événement de blur de DatePicker avec intervalle, #8784
+- L'attribut `format` de TimePicker supporte maintenant AM/PM, #8620 (par @firesh)
+
+### 2.0.7
+
+*2017-11-29*
+
+- Correction du style du bouton de type texte désactivé, #8570
+
+### 2.0.6
+
+*2017-11-29*
+
+- Correction d'un bug de style des icônes de tri de la table, #8405
+- Correction du mécanisme de déclenchement de Popover lorsque son `trigger` est manuel, #8467
+- Ajout des attributs `prefix-icon` et `suffix-icon` pour Autocomplete, #8446 (par @liyanlong)
+- Ajout de l'attribut `separator` pour Cascader, #8501
+- Ajout de l'attribut `clearable` pour Input, #8509 (par @lbogdan)
+- Ajout de l'attribut `background` pour Pagination, #8553
+
+### 2.0.5
+
+*2017-11-17*
+
+- Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283
+- Correction d'une fuite de mémoire de la directive `clickoutside`, #8168 #8225 (par @badpunman @STLighter)
+- Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy)
+- Ajout de l'attribut `collapse-tags` pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190
+- Correction d'une consommation CPU élevée causée par la table cachée, #8351
+- Maintenant vous pouvez utiliser la méthode `doLayout` de la Table pour mettre à jour sa disposition, #8351
+
+### 2.0.4
+
+*2017-11-10*
+
+- Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree.
+- Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042
+- Correction de la suppression incorrecte de `updateKeyChildren` dans Tree, #8100
+- Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100
+- Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang)
+
+### 2.0.3
+
+*2017-11-03*
+
+- Correction des attributs `éditable` et `readonly` pour DatePicker avec intervalle, #7922
+- Correction d'une erreur de style des Tabs imbriqués, #7941
+- Correction d'une erreur de style de la dernière étape des Steps verticales, #7980
+- Correction de la synchronisation du déclenchement de l'événement `current-current-change` pour Pagination, #7995
+- Correction d'une infobulle non enregistrée dans Menu, #7995
+
+### 2.0.2
+
+*2017-10-31*
+
+- Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817
+- La méthode `validate` de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice)
+- Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838
+- Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son `list-type` est picture-card, #7857
+- Ajout de l'attribut `sort-by` pour TableColumn, #7828 (par @wangfengming)
+- Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485)
+- Correction d'une erreur de style d'icône des Steps verticales, #7891
+- La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891
+
+### 2.0.1
+
+*2017-10-28*
+
+- Correction d'une erreur de style de RadioButton et CheckboxButton, #7793
+- Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811
+- Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811
+
+### 2.0.0 Carbon
+
+*2017-10-27*
+
+#### Nouvelles fonctionnalités
+- Général
+  - Un nouveau thème : `theme-chalk`.
+  - L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
+  - Ajout du typage TypeScript
+  - Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées
+  - Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions
+  - Ajout des composants de mise en page : Container, Header, Aside, Main, Footer
+  - Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété `size` pour configurer les tailles par défaut pour tous les composants.
+- Button
+  - Ajout de l'attribut `round`. Il est utilisé pour les boutons à coins ronds #6643
+- TimeSelect
+  - Vous pouvez maintenant naviguer en appuyant sur les touches `Up` et `Down`, et en appuyant sur `Enter` vous sélectionnez l'heure #6023.
+- TimePicker
+  - Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur `Entrée` vous sélectionnez l'heure #6050.
+  - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169
+  - Ajout de l'attribut `farrow-control` pour faire tourner le temps avec les flèches #7438
+- Tree
+  - Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257
+  - Ajout de l'attribut `check-descendants`. Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode `lazy` #6235
+- Tag
+  - Ajouté l'attribut `size` #7203
+- Datepicker
+  - Maintenant `timeFormat` peut formater le TimePicker quand le type est réglé sur `datetimerange` #6052
+  - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169
+  - Ajout de l'attribut `value-format` pour personnaliser le format de la valeur liée, #7367
+  - Ajout de l'attribut `unlink-panels` pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates
+- MessageBox
+  - Ajout de l'attribut `closeOnHashChange` #6043
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #7029
+  - Ajout de l'attribut `roundButton` pour afficher les boutons ronds #7029
+  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\*</sup> #6043
+  - Ajout de l'attribut `inputType` pour assigner le type de l'input intérieur, #7651
+- Dialog
+  - Ajout des attributs `width`、`fullscreen`、`append-to-body`. La boîte de dialogue peut maintenant être imbriquée
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #7042
+  - Ajout de `focus-after-closed`、`focus-after-open` pour améliorer l'accessibilité #6511
+- ColorPicker
+  - Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167
+  - Ajout des attributs `size` et `disabled` #7026
+  - Ajout de l'attribut `popper-class` #7351
+- Message
+  - Maintenant la couleur des icônes peut être modifiée par CSS #6207
+  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\*</sup> #6207
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #6875
+- Notification
+  - Ajout de l'attribut `position` pour configurer où Notification apparaît #6231
+  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\*</sup> #6231
+  - Ajout de l'attribut `showClose` pour cacher le bouton de fermeture #6402
+- Rate
+  - Ajout de l'attribut `show-score` pour déterminer si le score actuel est affiché #6295
+- Tabs
+  - Ajout de l'attribut `tab-position` #6096
+- Radio
+  - Ajout des attributs `border` et `size` #6690
+- Checkbox
+  - Ajout des attributs `border` et `size` #6690
+- Alert
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #6876
+- Menu
+  - Ajout des attributs `background-color`, `text-color` et `active-text-color` #7064
+  - Ajout des méthodes `open` et `close` pour ouvrir et fermer les sous-menus par programmation, #7412
+- Form
+  - Ajout de l'attribut `inline-message` pour déterminer si le message de validation est affiché en ligne #7032
+  - Ajout de l'attribut `status-icon` pour afficher une icône de feedback après validation #7032
+  - Form et FormItem ont maintenant un attribut `size`. Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428
+  - La méthode `validate` retournera maintenant une promesse si le rappel est omis, #7405
+  - Ajout de la méthode `clearValidate` pour la validation des résultats pour tous les éléments de formulaire, #7623
+- Input
+  - Ajout des attributs `suffixe` et `préfixe` des slots nommés, `suffixIcon` et `prefixIcon` pour ajouter du contenu dans la zone de saisie #7032
+- Breadcrumb
+  - Ajout de l'attribut `separator-class` pour supporter les icônes comme séparateurs d'éléments #7203
+- Steps
+  - Ajout de l'attribut `simple` pour activer les étapes de style simple #7274
+- Pagination
+  - Ajout des attributs `prev-text` et `next-text` pour personnaliser les textes des pages précédente et suivante #7005
+- Loading
+  - Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés `spinner` et `background` #7390
+- Autocomplete
+  - Ajout de l'attribut `debounce`, #7413
+- Upload
+  - Ajout des attributs `limit` et `on-exceed` pour limiter le nombre de fichiers, #7405
+- DateTimePicker
+  - Ajout de l'attribut `time-arrow-control` pour activer `arrow-control` du TimePicker imbriqué, #743838
+- Layout
+  - Ajout d'un nouveau point d'arrêt `xl` pour les fenêtres plus larges que 1920px
+- Table
+  - Ajout de l'attribut `span-method` pour la fusion de cellules
+  - Ajout de la méthode `clearSort` pour effacer le tri par programmation
+  - Ajout de la méthode `clearFilter` pour effacer le filtre par programmation
+  - Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe `.expanded` sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style
+  - Ajout de l'attribut `size`
+  - Ajout de la méthode `toggleRowExpansionRowExpansion` pour ouvrir ou réduire les lignes extensibles par programmation
+  - Ajout de l'attribut `cell-class-name` pour assigner un nom de classe aux cellules
+  - Ajout de l'attribut `cell-style` pour le style des cellules
+  - Ajout de l'attribut `header-row-class-name` pour assigner un nom de classe aux lignes d'en-tête
+  - Ajout de l'attribut `header-row-style` pour le style d'en-tête
+  - Ajout de l'attribut `header-cell-class-name` pour assigner un nom de classe aux cellules d'en-tête
+  - Ajout de l'attribut `header-cell-style` pour le style des cellules d'en-tête
+  - L'attribut `prop` de la tableColumn accepte maintenant les notations `object[key]`
+  - Ajout de l'attribut `index` pour TableColumn pour personnaliser les index de lignes
+- Select
+  - Ajout de l'attribut `reserve-keyword` pour réserver le mot-clé de la recherche courante après avoir sélectionné une option.
+
+#### Corrections de bugs
+- DatePicker
+  - Correction de `v-model` retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038
+  - Correction de la première entrée effacée dans le type `daterange` #6021
+- DateTimePicker
+  - Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090
+  - Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076
+- TimePicker
+  - Correction de `v-model` qui ne se mettait pas à jour correctement lors du blur #6023
+- Dialog
+  - Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088
+- Select
+  - Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151
+- Table
+  - Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis `display : none`
+  - Correction de l'extension de la largeur de la table lorsque l'élément parent a `display : flex`
+  - Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement `append` disparaissaient lorsque les données étaient récupérées dynamiquement
+  - Correction de l'attribut `expand-row-keys` qui ne fonctionnait pas avec la valeur initiale
+  - Correction d'une défaillance du filtre lors de la mise à jour de `data`
+  - Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés
+  - Correction d'un bug dynamique de `max-height`
+  - Correction de quelques erreurs de calcul de style
+
+#### Breaking changes
+- Général
+  - Suppression de `theme-default`.
+  - Compatible avec Vue 2.5.2+ et IE 10+
+  - L'événement `change` des composants de formulaire et l'événement `current-current-change` de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur
+  - L'attribut `size` de Button et les composants de formulaire acceptent maintenant `medium`, `small` et `mini`
+  - Pour faciliter l'utilisation d'icônes tierces, les attributs `icon` du bouton et des étapes, `prefix-icon` et `suffix-icon` d'Input nécessitent maintenant un nom de classe complet
+- Dialog
+  - Suppression de l'attribut `taille`. Maintenant la taille de Dialog peut être configurée par `width` et `fullscreen`
+  - Maintenant la visibilité de Dialog ne peut plus être contrôlée par `v-model`
+- Rate
+  - Le `text-template` est renommé `score-template`
+- Dropdown
+  - `menu-align` est renommé en `placement`. Maintenant il supporte plus de positions
+- Transfert
+  - le `footer-format` est renommé en `format`
+- Switch
+  - Les attributs commençant par `on-**` seront analysés pour les événements dans JSX, ce qui rend tous les attributs `on-*` de Switch incapable de fonctionner en JSX. Ainsi, les attributs `on-**` sont renommés en `active-*`, et par conséquent les attributs `off-*` sont renommés en `inactive-*`. Cette modification affecte les attributs suivants: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
+  - Les attributs `active-text` et `inactive-text` n'ont plus de valeurs par défaut
+- Tag
+  - L'attribut `type` accepte maintenant `success`, `info`, ` warning` et `danger`
+- Menu
+  - Suppression de l'attribut `theme`. La couleur du menu peut être configurée en utilisant `background-color`, `text-color` et `active-text-color`
+- Input
+  - Suppression de l'attribut `icon`. L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut `suffix-icon` ou du slot `suffix-icon`
+  - Suppression de l'attribut `on-icon-click` et de l'événement `click`. Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés
+  - L'événement `change` se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement `input`
+- Autocomplete
+  - Suppression de l'attribut `custom-item`. Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant `scoped slot`.
+  - Suppression de l'attribut `props`. Vous pouvez maintenant utiliser l'attribut `value-key` pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage.
+- Steps
+  - Suppression de l'attribut `center`
+  - Maintenant le Steps va remplir son conteneur parent par défaut
+- DatePicker
+  - Le paramètre de l'événement `change` de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par `value-format`
+- Table
+  - Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de `inline-template`
+  - `sort-method` s'aligne maintenant avec `Array.sort`. Il devrait retourner un nombre au lieu d'un booléen
+  - L'emplacement `append` est déplacé à l'extérieur de l'élément `tbody` pour éviter les rendus multiples
+  - L'événement `expand` est renommé en `expand-change`
+  - Les paramètres de la méthode `row-class-name` et `row-style` sont maintenant un objet
+
+##
+<i><sup><sup>*</sup> Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.</i>.

examples/app.vue

@@ -13,6 +13,7 @@
   import zhLocale from 'main/locale/lang/zh-CN';
   import enLocale from 'main/locale/lang/en';
   import esLocale from 'main/locale/lang/es';
+  import frLocale from 'main/locale/lang/fr';
 
   const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
   const localize = lang => {
@@ -23,6 +24,9 @@
       case 'es':
         use(esLocale);
         break;
+      case 'fr-FR':
+        use(frLocale);
+        break;
       default:
         use(enLocale);
     }

examples/components/header.vue

@@ -381,7 +381,8 @@
         langs: {
           'zh-CN': '中文',
           'en-US': 'English',
-          'es': 'Español'
+          'es': 'Español',
+          'fr-FR': 'Français'
         }
       };
     },

examples/components/search.vue

@@ -37,7 +37,7 @@
 <style>
   .algolia-search {
     width: 450px !important;
-  
+
     &.is-empty {
       .el-autocomplete-suggestion__list {
         padding-bottom: 0;
@@ -51,27 +51,27 @@
 
     li {
       border-bottom: solid 1px #ebebeb;
-      
+
       &:last-child {
          border-bottom: none;
        }
     }
-    
+
     .algolia-highlight {
       color: #409EFF;
       font-weight: bold;
     }
-    
+
     .algolia-search-title {
       font-size: 14px;
       margin: 6px 0;
       line-height: 1.8;
     }
-    
+
     .algolia-search-separator {
       padding: 0 6px;
     }
-    
+
     .algolia-search-content {
       font-size: 12px;
       margin: 6px 0;
@@ -80,7 +80,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    
+
     .algolia-search-link {
       position: absolute;
       bottom: 0;
@@ -96,14 +96,14 @@
       &:hover {
          background-color: #e4e7ed;
        }
-    
+
       img {
         display: inline-block;
         height: 17px;
         margin-top: 10px;
       }
     }
-  
+
     .algolia-search-empty {
       margin: 5px 0;
       text-align: center;
@@ -136,6 +136,11 @@
             search: 'Buscar',
             empty: 'No hay datos que coincidan',
             index: 'es'
+          },
+          'fr-FR': {
+            search: 'Rechercher',
+            empty: 'Aucun résultat',
+            index: 'fr'
           }
         }
       };
@@ -213,4 +218,4 @@
       this.initIndex();
     }
   };
-</script>
+</script>

examples/docs/fr-FR/alert.md

@@ -0,0 +1,228 @@
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+
+  .demo-box.demo-alert .el-alert:first-child {
+    margin: 0;
+  }
+</style>
+
+## Alerte
+
+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>
+```
+:::
+
+### 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="avec description"
+    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 |
+
+### Slot
+
+| Nom | Description |
+|------|--------|
+| title | Le contenu du titre. |
+
+### Évènements
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| close | Se déclenche lorsque l'alerte est fermée. | — |

examples/docs/fr-FR/badge.md

@@ -0,0 +1,146 @@
+## 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>
+```
+:::
+
+<style scoped>
+  .share-button {
+    width: 36px;
+    padding: 10px;
+  }
+
+  .mark {
+    margin-top: 8px;
+    line-height: 1;
+    float: right;
+  }
+
+  .clearfix {
+    @utils-clearfix;
+  }
+
+  .item {
+    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 |   —  |

examples/docs/fr-FR/breadcrumb.md

@@ -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'enregistrement dans l'historique. | boolean | — | false |

examples/docs/fr-FR/button.md

@@ -0,0 +1,189 @@
+<style>
+  .demo-box.demo-button {
+    .el-row {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+    .el-button-group {
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+
+      & + .el-button-group {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
+
+## 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>Default</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>Plain</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>Round</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 en plus 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 |

examples/docs/fr-FR/card.md

@@ -0,0 +1,219 @@
+<script>
+  import dateUtil from 'main/utils/date'
+  export default {
+    data() {
+      return {
+        currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
+      };
+    }
+  }
+</script>
+
+<style scoped>
+  .text {
+    font-size: 14px;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix {
+    @utils-clearfix;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+
+## Card
+
+Conteneur intégrant des informations.
+
+### Usage
+
+Les composants Card incluent 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">Operating button</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="~examples/assets/images/hamburger.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 button</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 |

examples/docs/fr-FR/carousel.md

@@ -0,0 +1,241 @@
+<script>
+  export default {
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+        demos[0].className += ' small';
+        demos[3].className += ' medium';
+      });
+    }
+  }
+</script>
+<style>
+  .demo-carousel .block {
+    padding: 30px;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-carousel .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-carousel .el-carousel__container {
+    text-align: center;
+  }
+
+  .demo-carousel .el-carousel__item {
+    h3 {
+      color: #fff;
+      font-size: 18px;
+      line-height: 300px;
+      margin: 0;
+    }
+    &:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+    &:nth-child(2n+1) {
+      background-color: #d3dce6;
+    }
+  }
+
+  .demo-carousel .small h3 {
+    font-size: 14px;
+    line-height: 150px;
+  }
+
+  .demo-carousel .medium h3 {
+    font-size: 14px;
+    line-height: 200px;
+  }
+</style>
+
+## 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 carousel. 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 carousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carousel 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>{{ 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>{{ 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 carousel.
+
+:::demo L'attribut `indicator-position` détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carousel, 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 carousel. 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 suffisement 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 carousel.
+```html
+<template>
+  <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel-item v-for="item in 6" :key="item">
+      <h3>{{ 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 Carousel
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | Hauteur du carousel. | 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 carousel 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és. | string | always/hover/never | hover |
+| type | Type du carousel. | string | card | — |
+| loop | Affiche les éléments en boucle. | boolean | - | true |
+
+### Évènements du Carousel
+| 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 Carousel
+| 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 Carousel-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 | — | — |

examples/docs/fr-FR/cascader.md

@@ -0,0 +1,1701 @@
+<script>
+  export default {
+    data() {
+      return {
+        options2: [{
+          label: 'California',
+          cities: []
+        }, {
+          label: 'Florida',
+          cities: []
+        }],
+        props: {
+          value: 'label',
+          children: 'cities'
+        },
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }],
+        optionsWithDisabled: [],
+        selectedOptions: [],
+        selectedOptions2: [],
+        selectedOptions3: ['component', 'data', 'tag']
+      };
+    },
+    created() {
+      this.optionsWithDisabled = JSON.parse(JSON.stringify(this.options));
+      this.optionsWithDisabled[0].disabled = true;
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+        demos[demos.length - 1].style.padding = '0';
+      });
+    },
+    methods: {
+      handleItemChange(val) {
+        console.log('active item:', val);
+        setTimeout(_ => {
+          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
+            this.options2[0].cities = [{
+              label: 'Los Angeles'
+            }];
+          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
+            this.options2[1].cities = [{
+              label: 'Orlando'
+            }];
+          }
+        }, 300);
+      },
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-cascader {
+    .el-cascader {
+      width: 222px;
+    }
+  }
+  .demo-cascader-size {
+    .el-cascader {
+      vertical-align: top;
+      margin-right: 15px;
+    }
+  }
+  .demo-cascader .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-cascader .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+## Cascader
+
+Si les options ont une structure hiérarchique claire, un Cascader peut être utilisé pour les afficher et les selectionner.
+
+### Usage
+
+Il y a deux manières de dérouler la liste des options.
+
+:::demo Assigner un tableau à l'attribut `options` génère un Cascader. L'attribut `expand-trigger` détermine comment les options suivantes sont affichées. Cet exemple utilises aussi l'évènement `change`, qui a pour paramètre la valeur du Cascader, c'est à dire un tableau constitué de chaque niveau jusqu'à la valeur selectionnée, comme un chemin.
+```html
+<div class="block">
+  <span class="demonstration">Les options se déroulent après un clic (défaut)</span>
+  <el-cascader
+    :options="options"
+    v-model="selectedOptions"
+    @change="handleChange">
+  </el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Les options se déroulent au passage de la souris</span>
+  <el-cascader
+    expand-trigger="hover"
+    :options="options"
+    v-model="selectedOptions2"
+    @change="handleChange">
+  </el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }],
+        selectedOptions: [],
+        selectedOptions2: []
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Options désactivées
+
+Désactivez une option en configurant `disabled` dans l'objet option.
+
+:::demo Dans cet exemple, le premier item dans le tableau `options` est configuré avec `disabled: true`, il est donc désactivé. Par défaut, Cascader recherche le champ `disabled` dans chaque option; si vous utilisez un autre nom de champ pour indiquer que l'option est désactivée, vous pouvez l'assigner dans l'attribut `props` (voir la table de l'API ci-dessous). Les champs `value`, `label` et `children` peuvent être personnalisés de la même manière.
+```html
+<el-cascader
+  :options="optionsWithDisabled"
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        optionsWithDisabled: [{
+          value: 'guide',
+          label: 'Guide',
+          disabled: true,
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Afficher uniquement le dernier niveau
+
+Le champ peut n'afficher que le dernier niveau au lieu de tous.
+
+:::demo L'attribut `show-all-levels` détermine si tous les niveaux sont affichés. Si il est à `false`, seul le dernier niveau est affiché.
+```html
+<el-cascader
+    :options="options"
+    :show-all-levels="false"
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Valeur par défaut
+
+:::demo La valeur par défaut peut être définit grâce à un tableau.
+```html
+<el-cascader
+  :options="options"
+  v-model="selectedOptions3"
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }],
+        selectedOptions3: ['component', 'data', 'tag']
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Changement après sélection
+
+Les options parentes peuvent aussi être sélectionnées.
+
+:::demo Par défaut seules les options de dernier niveau peuvent être sélectionnées. En réglant `change-on-select` à `true`, les options parentes peuvent aussi être sélectionnées.
+```html
+<el-cascader
+  :options="options"
+  change-on-select
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Charger les options dynamiquement
+
+Il est possible de charger dynamiquement les options quand on clique ou passe la souris sur leurs parent.
+
+:::demo Dans cet exemple, les optionsn'ont pas de données de villes au moment de l'initialisation. Grâce à l'évènement `active-item-change` vous pouvez charger les villes de manière dynamique. De plus, cet exemple montre comment `props` peut être utilisé.
+```html
+<el-cascader
+  :options="options2"
+  @active-item-change="handleItemChange"
+  :props="props"
+></el-cascader>
+
+<script>
+  export default {
+    data() {
+      return {
+        options2: [{
+          label: 'California',
+          cities: []
+        }, {
+          label: 'Florida',
+          cities: []
+        }],
+        props: {
+          value: 'label',
+          children: 'cities'
+        }
+      };
+    },
+
+    methods: {
+      handleItemChange(val) {
+        console.log('active item:', val);
+        setTimeout(_ => {
+          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
+            this.options2[0].cities = [{
+              label: 'Los Angeles'
+            }];
+          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
+            this.options2[1].cities = [{
+              label: 'Orlando'
+            }];
+          }
+        }, 300);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Filtres
+
+Recherchez une option particulière en entrant des mots-clé.
+
+:::demo Ajouter `filterable` à `el-cascader` active le filtrage.
+```html
+<div class="block">
+  <span class="demonstration">Only options of the last level can be selected</span>
+  <el-cascader
+    placeholder="Try searching: Guide"
+    :options="options"
+    filterable
+  ></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Options of all levels can be selected</span>
+  <el-cascader
+    placeholder="Try searching: Guide"
+    :options="options"
+    filterable
+    change-on-select
+  ></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+| Attribut | Description         | Type    | Options       | Défaut|
+|---------- |-------------------- |---------|-------------  |-------- |
+| value / v-model | La valeur liée.  | boolean / string / number | — | — |
+| options   | Données des options. | array | — | — |
+| props | Options de configuration, voir la table suivante. | object | — | — |
+| value | Valeur sélectionnée. | array | — | — |
+| separator | Séparateur des options. | string | — | / |
+| popper-class | Classe personnalisée pour le menu déroulant du Cascader | string | — | — |
+| placeholder | Placeholder du champ. | string | — | Select |
+| disabled  | Désactive le Cascader. | boolean |  — | false |
+| clearable  | Détermine si la valeur peut être effacée. | boolean | — | false |
+| expand-trigger  | Mode de déclenchement du menu suivant. | string | click / hover | click |
+| show-all-levels | Détermine si tout les niveaux doivent être affichés dans le champ. | boolean | — | true |
+| filterable  | Active la recherche par mots-clé. | boolean | — | — |
+| debounce | Délai d'attente après avoir entré un mot-clé, en millisecondes. | number | — | 300 |
+| change-on-select | Détermine si il est possible de sélectionner une option de n'importe quel niveau. | boolean | — | false |
+| size  | taille du champ | string | medium / small / mini | — |
+| before-filter | Fonction de hook qui s'active avant le filtrage, le paramètre étant la valeur entrée. Si `false` est retourné ou bien une `Promise` est retournée puis rejetée, le filtrage sera annulé. | function(value) | — | — |
+
+### props
+| Attribut | Description | Type | Valeurs acceptées | Défaut |
+| --------- | ----------------- | ------ | ------ | ------ |
+| label     | Détermine quelle clé d'option est utilisé comme label. | string | — | — |
+| value     | Détermine quelle clé d'option est utilisé comme valeur. | string | — | — |
+| children  | Détermine quelle clé d'option est utilisé en tant que sous-options. | string | — | — |
+| disabled  | Détermine quelle clé d'option est utilisé pour indiquer si l'option est désactivée. | string | — | — |
+
+### Évènements
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| change  | Se déclecnhe lorsque la valeur change. | La valeur |
+| active-item-change | Se déclenche quand le parent de l'option active change, ne marche que si `change-on-select` est `false` | Un tableau des options actives |
+| blur | Se déclenche quand le Cascader perds le focus. | (event: Event) |
+| focus | Se déclenche quand le Cascader a le focus. | (event: Event) |
+| visible-change | Se déclenche quand le menu apparaît ou disparaît. | `true` quand il apparaît, `false` sinon. |

examples/docs/fr-FR/checkbox.md

@@ -0,0 +1,329 @@
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+  module.exports = {
+    data() {
+      return {
+        checkList: ['selected and disabled','Option A'],
+        // checkList2: ['Option A'],
+        checked: true,
+        checked1: false,
+        checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        isValid: 'valid',
+        checkAll: false,
+        cities: cityOptions,
+        checkedCities: ['Shanghai', 'Beijing'],
+        checkedCities1: ['Shanghai', 'Beijing'],
+        isIndeterminate: true,
+        checkboxGroup1: ['Shanghai'],
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    },
+    methods: {
+      handleChange(ev) {
+        console.log(ev);
+      },
+      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>
+
+## 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 selectionné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. Si 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 "Selectionner tout".
+
+:::demo
+
+```html
+<template>
+  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Selectionner 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="checkedCities1"
+    :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 {
+        checkedCities1: ['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="checked3" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" 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="checkboxGroup6" 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 {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</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   |

examples/docs/fr-FR/collapse.md

@@ -0,0 +1,156 @@
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1'],
+        activeName: '1'
+      };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-collapse {
+    .el-collapse-item__header {
+      .header-icon {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
+
+## 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 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 operation 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 operation 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 rends 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 operation 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 | — | — |

examples/docs/fr-FR/color-picker.md

@@ -0,0 +1,182 @@
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#409EFF',
+        color2: null,
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#409EFF',
+        color5: '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'
+        ]
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+      });
+    },
+  }
+</script>
+
+<style>
+  .demo-color-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-color-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
+</style>
+
+## 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="color3" show-alpha></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color3: '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="color5"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color5: '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="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#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 |

examples/docs/fr-FR/color.md

@@ -0,0 +1,130 @@
+<style>
+  .demo-color-box {
+    border-radius: 4px;
+    padding: 20px;
+    margin: 5px 0;
+    height: 74px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 14px;
+
+    & .value {
+      font-size: 12px;
+      opacity: 0.69;
+      line-height: 24px;
+    }
+  }
+  .demo-color-box-group {
+    .demo-color-box {
+      border-radius: 0;
+      margin: 0;
+    }
+    .demo-color-box:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+    .demo-color-box:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  .bg-blue {
+    background-color: #409EFF;
+  }
+
+  .bg-success {
+    background-color: #13CE66;
+  }
+  .bg-warning {
+    background-color: #f7ba2a;
+  }
+  .bg-danger {
+    background-color: #ff4949;
+  }
+  .bg-info {
+    background-color: #909399;
+  }
+
+  .bg-text-primary {
+    background-color: #303133;
+  }
+  .bg-text-regular {
+    background-color: #606266;
+  }
+  .bg-text-secondary {
+    background-color: #909399;
+  }
+  .bg-text-placeholder {
+    background-color: #c0c4cc;
+  }
+
+  .bg-border-base {
+    background-color: #dcdfe6;
+  }
+  .bg-border-light {
+    background-color: #e4e7ed;
+  }
+  .bg-border-lighter {
+    background-color: #ebeef5;
+  }
+  .bg-border-extra-light {
+    background-color: #f2f6fc;
+  }
+
+  [class*=" bg-border-"] {
+    color: #303133;
+  }
+</style>
+
+## 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="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-blue">Bleu<div class="value">#409EFF</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 un 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 bg-success">Succès<div class="value">#67C23A</div></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-warning">Avertissement<div class="value">#E6A23C</div></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-info">Information<div class="value">#909399</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 bg-text-primary">Texte principal<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">Texte normal<div class="value">#606266</div></div>
+      <div class="demo-color-box bg-text-secondary">Texte secondaire<div class="value">#909399</div></div>
+      <div class="demo-color-box bg-text-placeholder">Texte de placeholder<div class="value">#C0C4CC</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box bg-border-base">Bordure de base<div class="value">#DCDFE6</div></div>
+      <div class="demo-color-box bg-border-light">Bordure claire<div class="value">#E4E7ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Bordure très claire<div class="value">#EBEEF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Bordure extra claire<div class="value">#F2F6FC</div></div>
+    </div>
+  </el-col>
+</el-row>

examples/docs/fr-FR/container.md

@@ -0,0 +1,299 @@
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    color: #333;
+  }
+
+  #common-layouts + .demo-container {
+    .el-header, .el-footer {
+      text-align: center;
+    }
+
+    .el-aside {
+      background-color: #D3DCE6;
+      text-align: center;
+      line-height: 200px;
+    }
+
+    .el-main {
+      background-color: #E9EEF3;
+      color: #333;
+      text-align: center;
+      line-height: 160px;
+    }
+
+    & > .source > .el-container {
+      margin-bottom: 40px;
+
+      &:nth-child(5) .el-aside,
+      &:nth-child(6) .el-aside {
+        line-height: 260px;
+      }
+
+     &:nth-child(7) .el-aside {
+       line-height: 320px;
+      }
+    }
+  }
+</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>
+
+## Container
+Les composants Container servent à structurer la page:
+
+`<el-container>`: Conteneur de wrapping. QUand iil est placé à l'intérieur de `<el-header>` ou `<el-footer>`, tout 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 le contenu principal.
+
+`<el-footer>`: Conteneur pour footers.
+
+:::tip
+Ces composants utlisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `<el-container>` doivent être un des quatres é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 |

examples/docs/fr-FR/custom-theme.md

@@ -0,0 +1,123 @@
+## Thème
+Element utlise 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 trois méthodes pour changer les variables de style.
+
+### 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 bleau 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 un 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 appellée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour intialiser 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 sauvegarder 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:
+```shell
+et
+
+> ✔ build theme font
+> ✔ build element theme
+```
+
+#### <strong>Importer le thème</strong>
+Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`. Importer votre propre thème se fait de la même manière qu'importer le thème par défaut:
+
+```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`.

examples/docs/fr-FR/date-picker.md

@@ -0,0 +1,533 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        pickerOptions2: {
+          shortcuts: [{
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 3 months',
+            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: '',
+        value3: '',
+        value4: '',
+        value5: '',
+        value6: '',
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+        value11: '',
+        value12: '',
+        value13: '',
+        value14: ''
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-block.demo-date-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-date-picker .container {
+    flex: 1;
+    border-right: solid 1px #EFF2F6;
+    .block {
+      border-right: none;
+      &:last-child {
+        border-top: solid 1px #EFF2F6;
+      }
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-date-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+## DatePicker
+
+Utilisez le 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 de raccourcis en créant un objet `picker-options` avec la propriété `shortcuts`. L'état désactivé est controllé par `disabledDate` qui prend une function.
+
+```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="pickerOptions1">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions1: {
+          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="value3"
+      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="value4"
+      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="value5"
+      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="value14"
+      placeholder="Sélectionnez une ou plusieurs dates">
+    </el-date-picker>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: '',
+        value4: '',
+        value5: '',
+        value14: ''
+      };
+    }
+  };
+</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="value6"
+      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 raccourcis</span>
+    <el-date-picker
+      v-model="value7"
+      type="daterange"
+      align="right"
+      unlink-panels
+      range-separator="à"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin"
+      :picker-options="pickerOptions2">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions2: {
+          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]);
+            }
+          }]
+        },
+        value6: '',
+        value7: ''
+      };
+    }
+  };
+</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="value8"
+      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="value9"
+      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 {
+        value8: '',
+        value9: ''
+      };
+    }
+  };
+</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 |
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Émet un objet Date</span>
+    <div class="demonstration">Value: {{ value10 }}</div>
+    <el-date-picker
+      v-model="value10"
+      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: {{ value11 }}</div>
+    <el-date-picker
+      v-model="value11"
+      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：{{ value12 }}</div>
+    <el-date-picker
+      v-model="value12"
+      type="date"
+      placeholder="Sélectionnez une date"
+      format="yyyy/MM/dd"
+      value-format="timestamp">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value10: '',
+        value11: '',
+        value12: ''
+      };
+    }
+  };
+</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: {{ value13 }}</p>
+    <el-date-picker
+      v-model="value13"
+      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 {
+        value13: ''
+      };
+    }
+  };
+</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 | 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 | anything accepted by `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 dsera 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 function qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
+| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |
+| onPick | Callbacl 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é. |

examples/docs/fr-FR/datetime-picker.md

@@ -0,0 +1,329 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        pickerOptions2: {
+          shortcuts: [{
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 3 months',
+            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: '',
+        value3: '',
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value5: '',
+        value6: '',
+        value7: ''
+      };
+    }
+  };
+</script>
+
+<style>
+.demo-block.demo-datetime-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-datetime-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-datetime-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+## DateTimePicker
+
+Selectionnez une date et un 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="pickerOptions1">
+    </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 {
+        pickerOptions1: {
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            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="value4"
+      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="value5"
+      type="datetimerange"
+      :picker-options="pickerOptions2"
+      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 {
+        pickerOptions2: {
+          shortcuts: [{
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 3 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value5: ''
+      };
+    }
+  };
+</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="value6"
+      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="value7"
+      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 {
+        value6: '',
+        value7: ''
+      };
+    }
+  };
+</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 | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
+| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| firstDayOfWeek | first day of week | Number | 1 to 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. | — |

examples/docs/fr-FR/dialog.md

@@ -0,0 +1,318 @@
+<script>
+  module.exports = {
+    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'
+        }],
+        dialogVisible: false,
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        outerVisible: false,
+        innerVisible: false,
+        centerDialogVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '120px'
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('Voulez-vous vraiment quitter ?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-dialog {
+    .dialog-footer button:first-child {
+      margin-right: 10px;
+    }
+    .full-image {
+      width: 100%;
+    }
+    .el-dialog__wrapper {
+      margin: 0;
+    }
+    .el-select {
+      width: 300px;
+    }
+    .el-input {
+      width: 300px;
+    }
+    .el-button--text {
+      margin-right: 15px;
+    }
+  }
+</style>
+
+## 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. Si 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">Ouvir 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, écouter les évènements `open` et `close`, et commité 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     | Si il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean   | — | true |
+| append-to-body     | Si 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 |
+
+### 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. | — |

examples/docs/fr-FR/dropdown.md

@@ -0,0 +1,358 @@
+<style>
+  .demo-box {
+    .el-dropdown {
+      vertical-align: top;
+
+      & + .el-dropdown {
+        margin-left: 15px;
+      }
+    }
+    .el-dropdown-link {
+      cursor: pointer;
+      color: #409EFF;
+    }
+    .el-icon-arrow-down {
+      font-size: 12px;
+    }
+  }
+
+  .block-col-2 {
+    margin: -24px;
+
+    .el-col {
+      padding: 30px 0;
+      text-align: center;
+      border-right: 1px solid #eff2f6;
+
+      &:last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+ .demo-dropdown .demonstration {
+   display: block;
+   color: #8492a6;
+   font-size: 14px;
+   margin-bottom: 20px;
+ }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      },
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+
+## 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>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-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>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-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 |
+
+### 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 a envoyer à la 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     |

examples/docs/fr-FR/form.md

@@ -0,0 +1,893 @@
+<script>
+  export default {
+    data() {
+      var checkAge = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'));
+          } else {
+            if (value < 18) {
+              callback(new Error('Age must be greater than 18'));
+            } else {
+              callback();
+            }
+          }
+        }, 1000);
+      };
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password'));
+        } else {
+          if (this.ruleForm2.checkPass !== '') {
+            this.$refs.ruleForm2.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password again'));
+        } else if (value !== this.ruleForm2.pass) {
+          callback(new Error('Two inputs don\'t match!'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formInline: {
+          user: '',
+          region: ''
+        },
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+          region: '',
+          type: ''
+        },
+        ruleForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        ruleForm2: {
+          pass: '',
+          checkPass: '',
+          age: ''
+        },
+        formLabelWidth: '80px',
+        options: [
+        ],
+        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' }
+          ]
+        },
+        rules2: {
+          pass: [
+            { validator: validatePass, trigger: 'blur' }
+          ],
+          checkPass: [
+            { validator: validatePass2, trigger: 'blur' }
+          ],
+          age: [
+            { validator: checkAge, trigger: 'blur' }
+          ]
+        },
+        dynamicValidateForm: {
+          domains: [{
+            key: Date.now(),
+            value: ''
+          }],
+          email: ''
+        },
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      },
+      onRuleFormSubmit() {
+        console.log('onRuleFormSubmit');
+      },
+      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>
+
+<style>
+  .demo-form.demo-en-US {
+    .el-select .el-input {
+      width: 360px;
+    }
+    .el-form {
+      width: 480px;
+    }
+
+    .line {
+      text-align: center;
+    }
+
+    .el-checkbox-group {
+      width: 320px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      &:after, &:before {
+        content: ' ';
+        display: table;
+      }
+      &:after {
+        clear: both;
+        visibility: hidden;
+        font-size: 0;
+        height: 0;
+      }
+
+      .el-checkbox {
+        float: left;
+        width: 160px;
+        padding-right: 20px;
+        margin: 0;
+        padding: 0;
+
+        + .el-checkbox {
+          margin-left: 0;
+        }
+      }
+    }
+    .demo-form-normal {
+      width: 480px;
+    }
+    .demo-form-inline {
+      width: auto;
+
+      .el-input {
+        width: 150px;
+      }
+      > * {
+        margin-right: 10px;
+      }
+    }
+    .demo-ruleForm {
+      width: 480px;
+
+      .el-select .el-input {
+        width: 360px;
+      }
+    }
+    .demo-dynamic {
+      width: 500px;
+
+      .el-input {
+        margin-right: 10px;
+        width: 270px;
+        vertical-align: top;
+      }
+    }
+    .fr {
+      float: right;
+    }
+  }
+</style>
+
+## 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="Pick a 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 type="fixed-time" 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">Create</el-button>
+    <el-button>Cancel</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="Pick a 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 type="fixed-time" 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')">Create</el-button>
+    <el-button @click="resetForm('ruleForm')">Reset</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 Here we use `status-icon` to reflect validation result as an icon.
+```html
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
+  <el-form-item label="Password" prop="pass">
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="Confirm" prop="checkPass">
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="Age" prop="age">
+    <el-input v-model.number="ruleForm2.age"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm2')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      var checkAge = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'));
+          } else {
+            if (value < 18) {
+              callback(new Error('Age must be greater than 18'));
+            } else {
+              callback();
+            }
+          }
+        }, 1000);
+      };
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password'));
+        } else {
+          if (this.ruleForm2.checkPass !== '') {
+            this.$refs.ruleForm2.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password again'));
+        } else if (value !== this.ruleForm2.pass) {
+          callback(new Error('Two inputs don\'t match!'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        ruleForm2: {
+          pass: '',
+          checkPass: '',
+          age: ''
+        },
+        rules2: {
+          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>
+```
+:::
+
+### DAjouter 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: 'Please input email address', trigger: 'blur' },
+      { type: 'email', message: 'Please input correct email address', 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 can not be null', trigger: 'blur'
+    }"
+  >
+    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
+    <el-button @click="addDomain">New domain</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">Reset</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: 'age is required'},
+      { type: 'number', message: 'age must be a number'}
+    ]"
+  >
+    <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')">Submit</el-button>
+    <el-button @click="resetForm('numberValidateForm')">Reset</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
+When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
+:::
+
+### 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="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="Pick a 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 type="fixed-time" placeholder="Pick a time" 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">Create</el-button>
+    <el-button>Cancel</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. | 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. Si 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'. | 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. Si 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. | - |

examples/docs/fr-FR/i18n.md

@@ -0,0 +1,226 @@
+## 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 rends la 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>
+</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.

examples/docs/fr-FR/icon.md

@@ -0,0 +1,102 @@
+<script>
+  var iconList = require('examples/icon.json');
+
+  export default {
+    data() {
+      return {
+        icons: iconList
+      };
+    }
+  }
+</script>
+
+<style>
+  .demo-icon .source > i {
+    color: #606266;
+    margin: 0 20px;
+    font-size: 1.5em;
+    vertical-align: middle;
+  }
+
+  .demo-icon .source > button {
+    margin: 0 20px;
+  }
+
+  .page-component .content > ul.icon-list {
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    border: solid 1px #eaeefb;
+    border-radius: 4px;
+  }
+  .icon-list li {
+    float: left;
+    width: 16.66%;
+    text-align: center;
+    height: 120px;
+    line-height: 120px;
+    color: #666;
+    font-size: 13px;
+    transition: color .15s linear;
+
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+
+    @utils-vertical-center;
+
+    span {
+      display: inline-block;
+      line-height: normal;
+      vertical-align: middle;
+      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+      color: #99a9bf;
+    }
+    i {
+      display: block;
+      font-size: 32px;
+      margin-bottom: 15px;
+      color: #606266;
+    }
+    .icon-name {
+      display: inline-block;
+      padding: 0 3px;
+      height: 1em;
+      color: #606266;
+    }
+    &:hover {
+      color: rgb(92, 182, 255);
+    }
+  }
+</style>
+
+## 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">Search</el-button>
+
+```
+:::
+
+### Icônes
+
+<ul class="icon-list">
+  <li v-for="name in icons" :key="name">
+    <span>
+      <i :class="'el-icon-' + name"></i>
+      <span class="icon-name">{{'el-icon-' + name}}</span>
+    </span>
+  </li>
+</ul>

examples/docs/fr-FR/input-number.md

@@ -0,0 +1,210 @@
+<script>
+  export default {
+    data() {
+      return {
+        num1: 1,
+        num2: 1,
+        num3: 5,
+        num4: 1,
+        num5: 1,
+        num6: 1,
+        num7: 1,
+        num8: 1,
+        num9: 1
+      }
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-input-number {
+    .el-input-number + .el-input-number {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## InputNumber
+
+Un champs d'input de valeurs numériques, avec un domaine personnalisable.
+
+### Usage
+
+:::demo Liez une variable à `v-model` dans l'element `<el-input-number>` et c'est tout !
+
+```html
+<template>
+  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num1: 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="num2" :disabled="true"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num2: 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="num3" :step="2"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num3: 5
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Précision
+
+:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.
+
+```html
+<template>
+  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num9: 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="num4"></el-input-number>
+    <el-input-number size="medium" v-model="num5"></el-input-number>
+    <el-input-number size="small" v-model="num6"></el-input-number>
+    <el-input-number size="mini" v-model="num7"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num4: 1,
+        num5: 1,
+        num6: 1,
+        num7: 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="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num8: 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 |
+| 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. | La nouvelle valeur. |
+| 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. | — |

examples/docs/fr-FR/input.md

@@ -0,0 +1,745 @@
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        input: '',
+        input1: '',
+        input2: '',
+        input21: '',
+        input22: '',
+        input23: '',
+        input3: '',
+        input4: '',
+        input5: '',
+        input6: '',
+        input7: '',
+        input8: '',
+        input9: '',
+        input10: '',
+        textarea: '',
+        textarea2: '',
+        textarea3: '',
+        select: '',
+        state1: '',
+        state2: '',
+        state3: '',
+        state4: ''
+      };
+    },
+    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" }
+        ];
+      },
+      querySearch(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
+
+        cb(results);
+      },
+      querySearchAsync(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
+
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          cb(results);
+        }, 3000 * Math.random());
+      },
+      createStateFilter(queryString) {
+        return (state) => {
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect(item) {
+        console.log(item);
+      },
+      handleIconClick(ev) {
+        console.log(ev);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  };
+</script>
+
+<style>
+  .demo-input.demo-en-US {
+    .el-select .el-input {
+      width: 130px;
+    }
+    .el-input {
+      width: 180px;
+    }
+    .el-textarea {
+      width: 414px;
+    }
+    .el-input-group {
+      width: 100%;
+    }
+    .demo-input-size {
+      .el-input {
+        vertical-align: top;
+        margin: 0 10px 10px 0;
+      }
+    }
+    .demo-input-suffix {
+      padding: 10px;
+    }
+    .demo-input-suffix .el-input {
+      margin-right: 15px;
+    }
+    .demo-input-label {
+      display: inline-block;
+      width: 130px;
+    }
+    .input-with-select .el-input-group__prepend {
+      background-color: #fff;
+    }
+    .demo-autocomplete {
+      text-align: center;
+
+      .sub-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #8492a6;
+      }
+
+      .el-col:not(:last-child) {
+        border-right: 1px solid rgba(224,230,237,0.50);
+      }
+
+      .el-autocomplete {
+        text-align: left;
+      }
+    }
+  }
+  .el-autocomplete-suggestion.my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px;
+
+      .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .addr {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+      .highlighted .addr {
+        color: #ddd;
+      }
+    }
+  }
+</style>
+
+## Input
+
+Le champs d'input de base.
+
+### 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="input1"
+  :disabled="true">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input1: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Effaçable
+
+:::demo Rendez l'input effaçable avec l'attribut `clearable`.
+
+```html
+<el-input
+  placeholder="Entrez quelque chose"
+  v-model="input10"
+  clearable>
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input10: ''
+    }
+  }
+}
+</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="input2">
+  </el-input>
+  <el-input
+    placeholder="Entrez du texte"
+    prefix-icon="el-icon-search"
+    v-model="input21">
+  </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="input22">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="Entrez du texte"
+    v-model="input23">
+    <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 {
+      input2: '',
+      input21: '',
+      input22: '',
+      input23: ''
+    }
+  }
+}
+</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="textarea2">
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  :autosize="{ minRows: 2, maxRows: 4}"
+  placeholder="Entrez quelque chose"
+  v-model="textarea3">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea2: '',
+      textarea3: ''
+    }
+  }
+}
+</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="input3">
+    <template slot="prepend">Http://</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="Entrez quelque chose" v-model="input4">
+    <template slot="append">.com</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="Entrez quelque chose" v-model="input5" 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 {
+      input3: '',
+      input4: '',
+      input5: '',
+      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="input6">
+  </el-input>
+  <el-input
+    size="medium"
+    placeholder="Entrez quelque chose"
+    v-model="input7">
+  </el-input>
+  <el-input
+    size="small"
+    placeholder="Entrez quelque chose"
+    v-model="input8">
+  </el-input>
+  <el-input
+    size="mini"
+    placeholder="Entrez quelque chose"
+    v-model="input9">
+  </el-input>
+</div>
+
+<script>
+export default {
+  data() {
+    return {
+      input6: '',
+      input7: '',
+      input8: '',
+      input9: ''
+    }
+  }
+}
+</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="state3"
+  :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: [],
+        state3: ''
+      };
+    },
+    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="state4"
+  :fetch-suggestions="querySearchAsync"
+  placeholder="Entrez quelque chose"
+  @select="handleSelect"
+></el-autocomplete>
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        state4: '',
+        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>
+```
+:::
+
+### 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 | — | — |
+| placeholder| Placeholder de l' Input. | string | — | — |
+| clearable | Si le bouton de reset apparaît. | boolean | — | false |
+| disabled | Si le champs 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) |
+| clear | Se déclenche quand le champs est effacé par le bouton de reset. | — |
+
+### Méthodes de l'Input
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Met le focus sur le champs. | — |
+| blur | Retire le focus de le champs. | — |
+| select | Sélectionne le texte du champs. | — |
+
+### 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 |
+
+### Slots de l'autocomplétion
+
+| Nom | Description |
+|------|--------|
+| prefix | Contenu du préfixe. |
+| suffix | Contenu du suffixe. |
+| prepend | Contenu à ajouter avant le champs. |
+| append | Contenu à ajouter après le champs. |
+
+### 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. |
+
+### Méthodes de l'autocomplétion
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Met le focus sur l'élément. | — |

examples/docs/fr-FR/installation.md

@@ -0,0 +1,32 @@
+## 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://jsfiddle.net/hzfpyvg6/14/)).
+
+<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Quick Start](/#/fr-FR/component/quickstart).

examples/docs/fr-FR/layout.md

@@ -0,0 +1,388 @@
+<style>
+  .demo-layout {
+    .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>
+
+## 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ée à 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 |

examples/docs/fr-FR/loading.md

@@ -0,0 +1,269 @@
+<style>
+  .demo-loading .el-table {
+    border: none;
+  }
+</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,
+        loading2: true,
+        fullscreenLoading: false
+      }
+    },
+
+    methods: {
+      openFullScreen() {
+        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>
+
+## 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="loading2"
+    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'
+        }],
+        loading2: 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="openFullScreen"
+    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: {
+      openFullScreen() {
+        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 | — | — |

examples/docs/fr-FR/menu.md

@@ -0,0 +1,358 @@
+<style>
+  .demo-box.demo-menu {
+    .el-menu-demo {
+      padding-left: 55px;
+    }
+    .el-menu-vertical-demo:not(.el-menu--collapse) {
+      width: 240px;
+      min-height: 400px;
+    }
+    .line {
+      height: 1px;
+      background-color: #e0e6ed;
+      margin: 35px -24px;
+    }
+    h5 {
+      font-size: 14px;
+      color: #8492a6;
+      margin-top: 10px;
+    }
+    .tac {
+      text-align: center;
+
+      .el-menu-vertical-demo {
+        display: inline-block;
+        text-align: left;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        activeIndex: '1',
+        activeIndex2: '1',
+        isCollapse: true
+      };
+    },
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+
+## 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 | Si 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  | — | — |
+| 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  | — | — |

examples/docs/fr-FR/message-box.md

@@ -0,0 +1,475 @@
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alert('Ceci est un message', 'Titre', {
+          confirmButtonText: 'OK',
+          callback: action => {
+            this.$message({
+              type: 'info',
+              message: `action: ${ action }`
+            });
+          }
+        });
+      },
+
+      open2() {
+        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Annuler',
+          type: 'warning'
+        }).then(() => {
+          setTimeout(() => {
+            this.$message({
+              message: 'Fichier supprimé',
+              type: 'success'
+            });
+          }, 200);
+        }).catch(() => {
+          setTimeout(() => {
+            this.$message({
+              message: 'Annulé',
+              type: 'info'
+            });  
+          }, 200);
+        });
+      },
+
+      open3() {
+        this.$prompt('Please input your email', 'Tips', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Annuler',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: 'E-mail invalide'
+        }).then(({ value }) => {
+          setTimeout(() => {
+            this.$message({
+              type: 'success',
+              message: 'Votre e-mail est: ' + value
+            });
+          }, 200);
+        }).catch(() => {
+          setTimeout(() => {
+            this.$message({
+              type: 'info',
+              message: 'Annulé'
+            });
+          }, 200);
+        });
+      },
+
+      open4() {
+        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 => {
+          setTimeout(() => {
+            this.$message({
+              type: 'info',
+              message: 'Action: ' + action
+            });
+          }, 200);
+        });
+      },
+
+      open5() {
+        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
+          dangerouslyUseHTMLString: true
+        });
+      },
+
+      open6() {
+        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'
+            })
+          });
+      },
+
+      open7() {
+        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>
+
+## 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`. Si 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="open2">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open2() {
+        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="open3">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open3() {
+        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="open4">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open4() {
+        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: [example](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="open5">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        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="open6">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        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="open7">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        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 | Si 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 |

examples/docs/fr-FR/message.md

@@ -0,0 +1,306 @@
+<script>
+  module.exports = {
+    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')
+          ])
+        });
+      },
+
+      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.');
+      },
+
+      open5() {
+        this.$message({
+          showClose: true,
+          message: 'Ceci est un message.'
+        });
+      },
+
+      open6() {
+        this.$message({
+          showClose: true,
+          message: 'Félicitations, ceci est un message de succès.',
+          type: 'success'
+        });
+      },
+
+      open7() {
+        this.$message({
+          showClose: true,
+          message: 'Attention, ceci est un avertissement.',
+          type: 'warning'
+        });
+      },
+
+      open8() {
+        this.$message({
+          showClose: true,
+          message: 'Ouups, ceci est une erreur.',
+          type: 'error'
+        });
+      },
+
+      openCenter() {
+        this.$message({
+          message: 'Texte centré',
+          center: true
+        });
+      },
+
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>Ceci est du <i>HTML</i></strong>'
+        });
+      }
+    }
+  };
+</script>
+
+## 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="open">message</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        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="open5">message</el-button>
+  <el-button :plain="true" @click="open6">success</el-button>
+  <el-button :plain="true" @click="open7">warning</el-button>
+  <el-button :plain="true" @click="open8">error</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$message({
+          showClose: true,
+          message: 'Ceci est un message.'
+        });
+      },
+
+      open6() {
+        this.$message({
+          showClose: true,
+          message: 'Félicitations, ceci est un message de succès.',
+          type: 'success'
+        });
+      },
+
+      open7() {
+        this.$message({
+          showClose: true,
+          message: 'Attention, ceci est un avertissement.',
+          type: 'warning'
+        });
+      },
+
+      open8() {
+        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 | — | — |
+
+### 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. |

examples/docs/fr-FR/notification.md

@@ -0,0 +1,428 @@
+<script>
+  module.exports = {
+    methods: {
+      open() {
+        const h = this.$createElement;
+
+        this.$notify({
+          title: 'Titre',
+          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: 'Prompt',
+          message: 'Ceci est un message qui ne se ferme pas',
+          duration: 0
+        });
+      },
+
+      open3() {
+        this.$notify({
+          title: 'Success',
+          message: 'Ceci est un message de succès',
+          type: 'success'
+        });
+      },
+
+      open4() {
+        this.$notify({
+          title: 'Warning',
+          message: 'Ceci est un avertissement',
+          type: 'warning'
+        });
+      },
+
+      open5() {
+        this.$notify.info({
+          title: 'Info',
+          message: 'Ceci est une information'
+        });
+      },
+
+      open6() {
+        this.$notify.error({
+          title: 'Error',
+          message: 'Ceci est une erreur'
+        });
+      },
+
+      open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin supérieur droit'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin inférieur droit',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin inférieur gauche',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin supérieur gauche',
+          position: 'top-left'
+        });
+      },
+
+      open11() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'Ceci est un message de succès',
+          offset: 100
+        });
+      },
+
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      },
+
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'Ceci est un message sans bouton de fermeture',
+          showClose: false
+        });
+      },
+
+      onClose() {
+        console.log('Notification is closed');
+      }
+    }
+  };
+</script>
+
+## Notification
+
+Affiche une notification globale dans un coin de la page.
+
+### Usage
+
+:::demo Element enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configure les champs `title` et` message`. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec `duration`. Si la durée est mise à `0`, la notification ne se fermera pas. `duration` prends donc un `Number` in millisecondes.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    Se ferme automatiquement
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    Ne se ferme pas automatiquement
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        const h = this.$createElement;
+
+        this.$notify({
+          title: 'Titre',
+          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: 'Prompt',
+          message: 'Ceci est un message qui ne se ferme pas',
+          duration: 0
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Types
+
+We provide four types: success, warning, info and error.
+
+:::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans `open5` et `open6`, qui ne nécessitent donc pas le champs `type`.
+```html
+<template>
+  <el-button
+    plain
+    @click="open3">
+    Success
+  </el-button>
+  <el-button
+    plain
+    @click="open4">
+    Warning
+  </el-button>
+  <el-button
+    plain
+    @click="open5">
+    Info
+  </el-button>
+  <el-button
+    plain
+    @click="open6">
+    Error
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open3() {
+        this.$notify({
+          title: 'Success',
+          message: 'Ceci est un message de succès',
+          type: 'success'
+        });
+      },
+
+      open4() {
+        this.$notify({
+          title: 'Warning',
+          message: 'Ceci est un avertissement',
+          type: 'warning'
+        });
+      },
+
+      open5() {
+        this.$notify.info({
+          title: 'Info',
+          message: 'Ceci est une information'
+        });
+      },
+
+      open6() {
+        this.$notify.error({
+          title: 'Error',
+          message: 'Ceci est une erreur'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Position personnalisée
+
+La notification peut apparaître dans le coin de votre choix.
+
+:::demo L'attribut `position` définit le coin d'apparition de la notification. Cela peut être `top-right`, `top-left`, `bottom-right` ou `bottom-left`. Le défaut est `top-right`.
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    Top Right
+  </el-button>
+  <el-button
+    plain
+    @click="open8">
+    Bottom Right
+  </el-button>
+  <el-button
+    plain
+    @click="open9">
+    Bottom Left
+  </el-button>
+  <el-button
+    plain
+    @click="open10">
+    Top Left
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin supérieur droit'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin inférieur droit',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin inférieur gauche',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin supérieur gauche',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Avec décalage
+
+Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.
+
+:::demo Réglez `offset` pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.
+```html
+<template>
+  <el-button
+    plain
+    @click="open11">
+    Notification avec décalage
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open11() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'Ceci est un message de succès',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Utiliser du HTML
+
+L'attribut `message` supporte le HTML.
+
+:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open12">
+    Utiliser du HTML
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>Ceci est du <i>HTML</i></strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Bien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](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="open13">
+    Bouton de fermeture caché
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'Ceci est un message sans bouton de fermeture',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Méthode globale
+
+Element ajoute la méthode `$notify` à Vue.prototype. Vous pouvez donc appeler `Notification` dans l'instance de Vue comme nous avons fait dans cette page.
+
+### Import à la demande
+
+Importez `Notification`:
+
+```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. |

examples/docs/fr-FR/pagination.md

@@ -0,0 +1,258 @@
+<style>
+  .demo-pagination .source.first {
+    padding: 0;
+  }
+
+  .demo-pagination .first .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-pagination .first .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-pagination .source.last {
+    padding: 0;
+  }
+
+  .demo-pagination .last .block {
+    padding: 30px 24px;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-pagination .last .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-pagination .last .demonstration + .el-pagination {
+    float: right;
+    width: 70%;
+    margin: 5px 20px 0 0;
+  }
+</style>
+
+## 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>
+```
+:::
+<script>
+  import { addClass } from 'element-ui/src/utils/dom';
+  export default {
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
+    },
+    methods: {
+      handleSizeChange(val) {
+        console.log(`${val} items per page`);
+      },
+      handleCurrentChange(val) {
+        console.log(`current page: ${val}`);
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        let demos = document.querySelectorAll('.source');
+        let firstDemo = demos[0];
+        let lastDemo = demos[demos.length - 1];
+        addClass(firstDemo, 'first');
+        addClass(lastDemo, 'last');
+      });
+    }
+  }
+</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 |
+
+### É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`. |

examples/docs/fr-FR/popover.md

@@ -0,0 +1,268 @@
+<script>
+  export default {
+    data() {
+      return {
+        visible: false,
+        visible2: false,
+        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'
+        }],
+        gridData2: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City',
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City',
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City',
+          $positive: true
+        }],
+        gridData3: [{
+          tag: 'Home',
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Home',
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-08',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Home',
+          date: '2016-05-06',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-07',
+          name: 'Jack',
+          address: 'New York City'
+        }]
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 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="visible2">
+  <p>Voulez-vous vraiment supprimer ceci?</p>
+  <div style="text-align: right; margin: 0">
+    <el-button size="mini" type="text" @click="visible2 = false">Annuler</el-button>
+    <el-button type="primary" size="mini" @click="visible2 = false">Confirmer</el-button>
+  </div>
+  <el-button slot="reference">Supprimer</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible2: 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 | — | — |
+
+### 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. | — |

examples/docs/fr-FR/progress.md

@@ -0,0 +1,67 @@
+<style>
+  .demo-box.demo-progress {
+    .el-progress--line {
+      margin-bottom: 15px;
+      width: 350px;
+    }
+    .el-progress--circle {
+      margin-right: 15px;
+    }
+  }
+</style>
+
+## 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 (pourcentage externe)
+
+:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100.
+```html
+<el-progress :percentage="0"></el-progress>
+<el-progress :percentage="70"></el-progress>
+<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Barre de progression linéaire (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="18" :percentage="0"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### 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="80" color="#8e71c7"></el-progress>
+<el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="50" status="exception"></el-progress>
+<el-progress type="circle" :percentage="100" status="text">Terminé</el-progress>
+```
+:::
+
+### 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 | 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 | — | — |
+| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
+| show-text | Si le pourcentage doit être affiché. | boolean | — | true |

examples/docs/fr-FR/quickstart.md

@@ -0,0 +1,269 @@
+## 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,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  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(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(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>

examples/docs/fr-FR/radio.md

@@ -0,0 +1,233 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        radio: '1',
+        radio1: 'selected and disabled',
+        radio2: 3,
+        radio3: 'New York',
+        radio4: 'New York',
+        radio5: 'New York',
+        radio6: 'New York',
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
+      };
+    }
+  };
+</script>
+
+## 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="radio1" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio1: '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="radio2">
+  <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 {
+        radio2: 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="radio3">
+      <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="radio4" 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="radio5" 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="radio6" 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 {
+        radio3: 'New York',
+        radio4: 'New York',
+        radio5: 'New York',
+        radio6: 'New York'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Avec bordures
+
+:::demo L'attribut `border` ajoute une bordure aux radios.
+```html
+<template>
+  <div>
+    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio9" 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="radio10" 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 {
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '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 | — | — |

examples/docs/fr-FR/rate.md

@@ -0,0 +1,180 @@
+<style>
+  .demo-rate .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-rate .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null,
+        value3: null,
+        value4: null,
+        value5: 3.7
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        let firstDemo = document.querySelector('.source');
+        firstDemo.style.padding = '0';
+      });
+    }
+  }
+</script>
+
+## 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`.
+
+``` 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="['#99A9BF', '#F7BA2A', '#FF9900']">
+  </el-rate>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null
+      }
+    }
+  }
+</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="value3"
+  :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+  show-text>
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: null
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Plus d'icônes
+
+Vous pouvez utiliser différentes icônes pour chaque
+
+:::demo Vous pouvez personnaliser les icônes de chaque niveau en utilisant `icon-classes`. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir l'icône des valeurs non-sélectionnées.
+
+``` html
+<el-rate
+  v-model="value4"
+  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  void-icon-class="icon-rate-face-off"
+  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value4: null
+      }
+    }
+  }
+</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="value5"
+  disabled
+  show-score
+  text-color="#ff9900"
+  score-template="{value} points">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value5: 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 | Couleurs des icônes. Doit en contenir trois, correspondants à chaque niveau. | array | — | ['#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 | Liste des classes des icônes. Doit en contenir trois, correspondants à chaque niveau. | array | — | ['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. |

examples/docs/fr-FR/select.md

@@ -0,0 +1,733 @@
+<script>
+  export default {
+    data() {
+      return {
+        list: null,
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        options2: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2',
+          disabled: true
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        options3: [{
+          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'
+          }]
+        }],
+        options4: [],
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        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: '',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: [],
+        value6: '',
+        value7: '',
+        value8: '',
+        value9: [],
+        value10: [],
+        value11: [],
+        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: item, label: item }; });
+    },
+
+    methods: {
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
+          }, 200);
+        } else {
+          this.options4 = [];
+        }
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-select .el-select {
+    width: 240px;
+  }
+</style>
+
+## 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="value2" placeholder="Select">
+    <el-option
+      v-for="item in options2"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+      :disabled="item.disabled">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options2: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2',
+          disabled: true
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value2: ''
+      }
+    }
+  }
+</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="value3" 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'
+        }],
+        value3: ''
+      }
+    }
+  }
+</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="value4" 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'
+        }],
+        value4: ''
+      }
+    }
+  }
+</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="value5" 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="value11"
+    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'
+        }],
+        value5: [],
+        value11: []
+      }
+    }
+  }
+</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="value6" 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'
+        }],
+        value6: ''
+      }
+    }
+  }
+</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="value7" placeholder="Select">
+    <el-option-group
+      v-for="group in options3"
+      :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 {
+        options3: [{
+          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'
+          }]
+        }],
+        value7: ''
+      }
+    }
+  }
+</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="value8" 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'
+        }],
+        value8: ''
+      }
+    }
+  }
+</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="value9"
+    multiple
+    filterable
+    remote
+    reserve-keyword
+    placeholder="Entrez un mot-clé"
+    :remote-method="remoteMethod"
+    :loading="loading">
+    <el-option
+      v-for="item in options4"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options4: [],
+        value9: [],
+        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: item, label: item };
+      });
+    },
+    methods: {
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options4 = this.list.filter(item => {
+              return item.label.toLowerCase()
+                .indexOf(query.toLowerCase()) > -1;
+            });
+          }, 200);
+        } else {
+          this.options4 = [];
+        }
+      }
+    }
+  }
+</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="value10"
+    multiple
+    filterable
+    allow-create
+    default-first-option
+    placeholder="Choisissez les tags de vos articles">
+    <el-option
+      v-for="item in options5"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        value10: []
+      }
+    }
+  }
+</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. | string | — | No matching data |
+| no-data-text | Texte à afficher quand il n'y a aucune option. | string | — | No data |
+| popper-class | Classe du menu déroulant. | string | — | — |
+| reserve-keyword | Quand `multiple` et `filter` sont activés, si 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. |
+
+### 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. | - |

examples/docs/fr-FR/slider.md

@@ -0,0 +1,254 @@
+<script>
+  export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 50,
+        value3: 36,
+        value4: 48,
+        value5: 42,
+        value6: 0,
+        value7: 0,
+        value8: 0,
+        value9: [4, 8],
+        value10: 0
+      };
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-box.demo-slider .source {
+    padding: 0;
+  }
+
+  .demo-box.demo-slider .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-box.demo-slider .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-box.demo-slider .demonstration + .el-slider {
+    float: right;
+    width: 70%;
+    margin-right: 20px;
+  }
+</style>
+
+## 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="value6"
+      :step="10">
+    </el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Points affichés</span>
+    <el-slider
+      v-model="value7"
+      :step="10"
+      show-stops>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value6: 0,
+        value7: 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="value8"
+      show-input>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value8: 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="value9"
+      range
+      show-stops
+      :max="10">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value9: [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="value10"
+      vertical
+      height="200px">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value10: 0
+      }
+    }
+  }
+</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 | — | — |
+
+## É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. |

examples/docs/fr-FR/steps.md

@@ -0,0 +1,178 @@
+<script>
+  export default {
+    data() {
+      return {
+        active: 0
+      };
+    },
+
+    methods: {
+      next() {
+        if (this.active++ > 2) this.active = 0;
+      }
+    }
+  }
+</script>
+
+## 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 `Boolean`. 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. |

examples/docs/fr-FR/switch.md

@@ -0,0 +1,169 @@
+<style>
+  .demo-box.demo-switch {
+    .el-switch {
+      margin: 20px 20px 20px 0;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true,
+        value3: true,
+        value4: true,
+        value5: '100',
+        value6: true,
+        value7: false
+      }
+    }
+  };
+</script>
+
+## 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="value3"
+  active-text="Paiement mensuel"
+  inactive-text="Paiement annuel">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value4"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="Paiement mensuel"
+  inactive-text="Paiement annuel">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true,
+        value4: 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: ' + value5" placement="top">
+  <el-switch
+    v-model="value5"
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
+  </el-switch>
+</el-tooltip>
+
+<script>
+  export default {
+    data() {
+      return {
+        value5: '100'
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+### Désactivé
+
+:::demo Ajoutez l'attribut `disabled` pour désactiver le switch.
+
+```html
+<el-switch
+  v-model="value6"
+  disabled>
+</el-switch>
+<el-switch
+  v-model="value7"
+  disabled>
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value6: true,
+        value7: 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 | — | —
+
+### É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. | —

examples/docs/fr-FR/table.md

@@ -0,0 +1,2176 @@
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+        tableData2: [{
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          $positive: true
+        }],
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }],
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }],
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }],
+        tableData7: [{
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-04',
+          name: 'John',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-01',
+          name: 'Morgan',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-03',
+          name: 'Jessy',
+          address: 'No. 189, Grove St, Los Angeles',
+        }],
+        currentRow: null,
+        multipleSelection: [],
+        search: '',
+      };
+    },
+
+    methods: {
+      getSummaries(param) {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = 'Coût total';
+            return;
+          }
+          const values = data.map(item => Number(item[column.property]));
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = '$ ' + values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        });
+
+        return sums;
+      },
+
+      resetDateFilter() {
+        this.$refs.filterTable.clearFilter('date');
+      },
+      clearFilter() {
+        this.$refs.filterTable.clearFilter();
+      },
+
+      setCurrent(row) {
+        this.$refs.singleTable.setCurrentRow(row);
+      },
+
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },
+
+      handleClick() {
+        console.log('click');
+      },
+
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
+
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+
+      handleCurrentChange(val) {
+        this.currentRow = val;
+      },
+
+      formatter(row, column) {
+        return row.address;
+      },
+
+      filterTag(value, row) {
+        return row.tag === value;
+      },
+
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      },
+
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      },
+
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      },
+
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      },
+
+      indexMethod(index) {
+        return index * 2;
+      }
+    },
+
+    watch: {
+      multipleSelection(val) {
+        console.log('selection: ', val);
+      }
+    }
+  };
+</script>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+
+  .demo-table .name-wrapper {
+    display: inline-block;
+  }
+
+  .demo-table .demo-table-expand {
+    label {
+      width: 90px;
+      color: #99a9bf;
+    }
+    .el-form-item {
+      margin-right: 0;
+      margin-bottom: 0;
+      width: 50%;
+    }
+  }
+</style>
+
+## Table
+
+Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.
+
+### Table basique
+
+Un tableau de base pour afficher seulement.
+
+:::demo Après avoir configuré l'attribut `data` de `el-table` avec un tableau d'objets, vous pouvez utiliser `prop` (correspondant à une clé dans chaque objet du tableau `data`) dans `el-table-column` pour insérer des données dans les colonnes, ainsi que l'attribut `label` pour définir le nom de la colonne. L'attribut `width` définit si besoin la largeur de la colonne.
+
+```html
+  <template>
+    <el-table
+      :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-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }, {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }, {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }, {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }]
+        }
+      }
+    }
+  </script>
+```
+:::
+
+### Table rayée
+
+Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.
+
+:::demo L'attribut `stripe` accepte un `Boolean`. Si `true`, le tabelau sera rayé.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    stripe
+    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-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec bordure
+
+:::demo Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut `border` à `true`.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    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-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec statut
+
+Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d'autres.
+
+:::demo Utilisez `row-class-name` dans `el-table` pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.
+```html
+<template>
+  <el-table
+    :data="tableData2"
+    style="width: 100%"
+    :row-class-name="tableRowClassName">
+    <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>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      }
+    },
+    data() {
+      return {
+        tableData2:  [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec un header fixe
+
+Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.
+
+:::demo En réglant l'attribut `height` de `el-table`, vous pouvez fixer le header sans avoir besoin de plus de code.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    height="250"
+    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 {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec colonnes fixes
+
+Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.
+
+:::demo Utilisez l'attribut `fixed` de `el-table-column` qui accepte un `Boolean`. Si `true`, la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="État"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ville"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="Opérations"
+      width="120">
+      <template slot-scope="scope">
+        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
+        <el-button type="text" size="small">Editer</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        console.log('click');
+      }
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec header et colonnes fixes
+
+Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.
+
+:::demo Header et colonnes fixes combinant les deux exemples précédents.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%"
+    height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="État"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ville"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Hauteur fluide dans une Table avec header et colonnes fixes
+
+Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.
+
+:::demo En utilisant l'attribut `max-height` de `el-table`, vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.
+```html
+<template>
+  <el-table
+    :data="tableData4"
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="État"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ville"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="Opérations"
+      width="120">
+      <template slot-scope="scope">
+        <el-button
+          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          type="text"
+          size="small">
+          Supprimer
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      }
+    },
+    data() {
+      return {
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Grouper les headers
+
+Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.
+
+:::demo Placez simplement `el-table-column` dans une autre `el-table-column`, et vous grouperez ainsi les headers.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column label="Informations de livraison">
+      <el-table-column
+        prop="name"
+        label="Nom"
+        width="120">
+      </el-table-column>
+      <el-table-column label="Informations d'adresse">
+        <el-table-column
+          prop="state"
+          label="État"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="city"
+          label="Ville"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="Adresse"
+          width="300">
+        </el-table-column>
+        <el-table-column
+          prop="zip"
+          label="Zip"
+          width="120">
+        </el-table-column>
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Sélecteur simple
+
+Vous pouvez activer la sélection d'une ligne.
+
+:::demo Activez la sélection en ajoutant l'attribut `highlight-current-row`. L'évènement `current-change` se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: `currentRow` et `oldCurrentRow`. Si vous avez besoin d'afficher l'index des lignes, ajoutez une `el-table-column` avec pour `type` la valeur `index`, qui commencera à 1.
+```html
+<template>
+  <el-table
+    ref="singleTable"
+    :data="tableData"
+    highlight-current-row
+    @current-change="handleCurrentChange"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      width="50">
+    </el-table-column>
+    <el-table-column
+      property="date"
+      label="Date"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="Adresse">
+    </el-table-column>
+  </el-table>
+  <div style="margin-top: 20px">
+    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>
+    <el-button @click="setCurrent()">Effacer la sélection</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        currentRow: null
+      }
+    },
+
+    methods: {
+      setCurrent(row) {
+        this.$refs.singleTable.setCurrentRow(row);
+      },
+      handleCurrentChange(val) {
+        this.currentRow = val;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Sélection multiple
+
+Vous pouvez aussi sélectionner plusieurs lignes.
+
+:::demo Ajoutez une `el-table-column` avec son `type` à `selection`. Cet exemple utilise aussi `show-overflow-tooltip`: par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez `show-overflow-tooltip`, qui accepte un `Boolean`. Si `true`, le contenu non-affiché s'affichera dans le tooltip lorsque la souris passera sur la case.
+```html
+<template>
+  <el-table
+    ref="multipleTable"
+    :data="tableData3"
+    style="width: 100%"
+    @selection-change="handleSelectionChange">
+    <el-table-column
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      label="Date"
+      width="120">
+      <template slot-scope="scope">{{ scope.row.date }}</template>
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="Adresse"
+      show-overflow-tooltip>
+    </el-table-column>
+  </el-table>
+  <div style="margin-top: 20px">
+    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Sélectionner les deuxième et troisième lignes</el-button>
+    <el-button @click="toggleSelection()">Effacer la sélection</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        multipleSelection: []
+      }
+    },
+
+    methods: {
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Trier
+
+Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.
+
+:::demo Ajoutez l'attribut `sortable` a une colonne pour pouvoir trier cette colonne. Il accepte un `Boolean` et à `false` par défaut. Ajoutez `default-sort` pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez `sort-method` ou `sort-by`. Si vous avez besoin d'un tri dynamique depuis le serveur, mettez `sortable` à `custom`, et écoutez l'évènement `sort-change` de `Table`. Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi `formatter` pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: `row` et `column`. Vous pouvez ainsi transformer les valeurs.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    :default-sort = "{prop: 'date', order: 'descending'}"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      :formatter="formatter">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+    methods: {
+      formatter(row, column) {
+        return row.address;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Filtrer
+
+Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
+
+:::demo Réglez `filters` et `filter-method` dans `el-table-column` pour rendre la colonne filtrable. `filters` prends un tableau, et `filter-method` est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: `value`, `row` et `column`.
+```html
+<template>
+  <el-button @click="resetDateFilter">Effacer le filtre date</el-button>
+  <el-button @click="clearFilter">Effacer tout les filtres</el-button>
+  <el-table
+    ref="filterTable"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      sortable
+      width="180"
+      column-key="date"
+      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+      :filter-method="filterHandler"
+    >
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      :formatter="formatter">
+    </el-table-column>
+    <el-table-column
+      prop="tag"
+      label="Tag"
+      width="100"
+      :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
+      :filter-method="filterTag"
+      filter-placement="bottom-end">
+      <template slot-scope="scope">
+        <el-tag
+          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
+          disable-transitions>{{scope.row.tag}}</el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }]
+      }
+    },
+    methods: {
+      resetDateFilter() {
+        this.$refs.filterTable.clearFilter('date');
+      },
+      clearFilter() {
+        this.$refs.filterTable.clearFilter();
+      },
+      formatter(row, column) {
+        return row.address;
+      },
+      filterTag(value, row) {
+        return row.tag === value;
+      },
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Template de colonne personnalisé
+
+Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.
+
+:::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      width="180">
+      <template slot-scope="scope">
+        <i class="el-icon-time"></i>
+        <span style="margin-left: 10px">{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Nom"
+      width="180">
+      <template slot-scope="scope">
+        <el-popover trigger="hover" placement="top">
+          <p>Nom: {{ scope.row.name }}</p>
+          <p>Addr: {{ scope.row.address }}</p>
+          <div slot="reference" class="name-wrapper">
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
+          </div>
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Opérations">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec header personnalisé
+
+Vous pouvez également personnaliser le header de la table.
+
+:::demo Vous pouvez personnaliser le header grâce aux [slots avec portée](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
+```html
+<template>
+  <el-table
+    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      align="right">
+      <template slot="header" slot-scope="scope">
+        <el-input
+          v-model="search"
+          size="mini"
+          placeholder="Type to search"/>
+      </template>
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'John',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Morgan',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Jessy',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        search: '',
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Ligne extensible
+
+Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.
+
+:::demo Activer la ligne extensible en mettant `type` à `expand` et en utilisant un slot. Le contenu de `el-table-column` sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%">
+    <el-table-column type="expand">
+      <template slot-scope="props">
+        <p>État: {{ props.row.state }}</p>
+        <p>Ville: {{ props.row.city }}</p>
+        <p>Adresse: {{ props.row.address }}</p>
+        <p>Zip: {{ props.row.zip }}</p>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Nom"
+      prop="name">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Ligne de somme
+
+Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.
+
+:::demo Mettez l'attribut `show-summary` à `true` dans `el-table`. Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec `sum-text`), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à `summary-method`, qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.
+```html
+<template>
+  <el-table
+    :data="tableData6"
+    border
+    show-summary
+    style="width: 100%">
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom">
+    </el-table-column>
+    <el-table-column
+      prop="amount1"
+      sortable
+      label="Quantité 1">
+    </el-table-column>
+    <el-table-column
+      prop="amount2"
+      sortable
+      label="Quantité 2">
+    </el-table-column>
+    <el-table-column
+      prop="amount3"
+      sortable
+      label="Quantité 3">
+    </el-table-column>
+  </el-table>
+
+  <el-table
+    :data="tableData6"
+    border
+    height="200"
+    :summary-method="getSummaries"
+    show-summary
+    style="width: 100%; margin-top: 20px">
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom">
+    </el-table-column>
+    <el-table-column
+      prop="amount1"
+      label="Coût 1 ($)">
+    </el-table-column>
+    <el-table-column
+      prop="amount2"
+      label="Coût 2 ($)">
+    </el-table-column>
+    <el-table-column
+      prop="amount3"
+      label="Coût 3 ($)">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      getSummaries(param) {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = 'Coût total';
+            return;
+          }
+          const values = data.map(item => Number(item[column.property]));
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = '$ ' + values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        });
+
+        return sums;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Étendue des lignes et colonnes
+
+Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.
+
+:::demo Utilisez `span-method` pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle `row`, la colonne actuelle `column`, l'index de la ligne `rowIndex` et l'index de la colonne `columnIndex`. La fonction doit retourner un tableau contenant deux nombres, le premier étant `rowspan` et le second `colspan`. Elle peut aussi retourner un objet avec les propriétés `rowspan` et `colspan`.
+
+```html
+<template>
+  <div>
+    <el-table
+      :data="tableData6"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nom">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="Quantité 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="Quantité 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="Quantité 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData6"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nom">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="Quantité 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="Quantité 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="Quantité 3">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Indices personnalisés
+
+Vous pouvez personnaliser les indices des colonnes de type `index`.
+
+:::demo Utilisez l'attribut `index` sur une `el-table-column` avec `type=index`. Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à `0`) comme paramètre, et la valeur de retour sera affichée en tant qu'indice.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      :index="indexMethod">
+    </el-table-column>
+    <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-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+      }
+    },
+    methods: {
+      indexMethod(index) {
+        return index * 2;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs de Table
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|----------------|----------------------|-----------|-----------------------|----------|
+| data | Les données de la table. | array | — | — |
+| height | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. | string/number | — | — |
+| max-height | La hauteur maximale de la table. La hauteur commence à `auto` jusqu'à atteindre la limite. La `maxHeight` est en px. | string/number | — | — |
+| stripe | Si la table est rayée. | boolean | — | false |
+| border | Si la table à une bordure verticale. | boolean | — | false |
+| size | Taille de la table. | string | medium / small / mini | — |
+| fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
+| show-header | Si le header de la table est visible. | boolean | — | true |
+| highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
+| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |
+| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |
+| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |
+| cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule. | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| cell-style | Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
+| header-row-class-name | Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header. | Function({row, rowIndex})/String | — | — |
+| header-row-style | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. | Function({row, rowIndex})/Object | — | — |
+| header-cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| header-cell-style | Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
+| row-key | Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si `reserve-selection` est activé. Quand c'est un `String`, l'accès multi-niveaux est supporté, e.g. `user.info.id`, mais `user.info[0].id` n'est pas supporté. Dans ce dernier cas une `Function` devrait être utilisée. | Function(row)/String | — | — |
+| empty-text | Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à `slot="empty"`. | String | — | No Data |
+| default-expand-all | Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand". | Boolean | — | false |
+| expand-row-keys | Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer `row-key` avant celle-ci. | Array | — | |
+| default-sort | Détermine l'ordre de tri par défaut. La propriété `prop` détermine la colonne par défaut, `order` détermine l'ordre par défaut. | Object | `order`: ascending, descending | Si `order` est absent, son défaut sera `ascending`. |
+| tooltip-effect | Propriété `effect` de Tooltip. | String | dark/light | | dark |
+| show-summary | Si une ligne de somme doit apparaître. | Boolean | — | false |
+| sum-text | Le label de la première cellule de la ligne de somme. | String | — | Sum |
+| summary-method | La méthode pour calculer la somme. | Function({ columns, data }) | — | — |
+| span-method | Méthode qui retourne les valeurs de colspan et rowspan. | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| select-on-indeterminate | Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si `true`, toutes les lignes sont sélectionnées. | Boolean | — | true |
+
+### Évènements de Table
+
+| Nom | Description | Paramètres |
+| ---- | ---- | ---- |
+| select | Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne. | selection, row |
+| select-all | Se déclenche quand l'utilisateur clique sur la checkbox du header. | selection |
+| selection-change | Se déclenche quand la selection change. | selection |
+| cell-mouse-enter | Se déclenche quand la souris passe sur une cellule. | row, column, cell, event |
+| cell-mouse-leave | Se déclenche quand la souris sort d'une cellule. | row, column, cell, event |
+| cell-click | Se déclenche quand l'utilisateur clique sur une cellule. | row, column, cell, event |
+| cell-dblclick | Se déclenche quand l'utilisateur double-clique sur une cellule. | row, column, cell, event |
+| row-click | Se déclenche quand l'utilisateur clique sur une ligne. | row, event, column |
+| row-contextmenu | Se déclenche quand l'utilisateur fait un click droit sur une ligne. | row, event |
+| row-dblclick | Se déclenche quand l'utilisateur double-clique sur une ligne. | row, event |
+| header-click | Se déclenche quand l'utilisateur clique sur une colonne du header. | column, event |
+| header-contextmenu | Se déclenche quand l'utilisateur fait un click droit sur une colonne du header. | column, event |
+| sort-change | Se déclenche quand l'ordre de tri change. | { column, prop, order } |
+| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered. | filters |
+| current-change | Se déclenche quand la ligne sélectionnée change. | currentRow, oldCurrentRow |
+| header-dragend | Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header. | newWidth, oldWidth, column, event |
+| expand-change | Se déclenche quand l'utilisateur étend ou réduit une ligne. | row, expandedRows |
+
+### Méthodes de Table
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| clearSelection | Dans les tables avec sélection multiple, efface la sélection. | — |
+| toggleRowSelection | Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée. | row, selected |
+| toggleAllSelection | Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes. | - |
+| toggleRowExpansion | Pour les lignes extensibles, change l'état de la ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est étendue. | row, expanded |
+| setCurrentRow | Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé. | row |
+| clearSort | Efface le tri. | — |
+| clearFilter | Efface les filtres des colonnes dont les `columnKey` sont passées. Si aucun paramètre, efface tout les filtres. | columnKeys |
+| doLayout | Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout. | — |
+| sort | Tri la table manuellement. La proriété `prop` détermine la colonne, `order` détermine l'ordre de tri. | prop: string, order: string |
+
+### Slots de Table
+
+| Nom | Description |
+|------|--------|
+| append | Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme si il y en a une. |
+
+### Attributs de Table-column
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| type | Type de la colonne. Si mis à `selection`, la colonne affichera des checkbox. Si mis à `index`, la colonne affichera l'indice de la ligne (début à 1). Si mis à `expand`, affichera l'icône d'extension.  | string | selection/index/expand | — |
+| index | Personnalise les indices de chaque ligne, marche avec les colonnes `type=index`. | number, Function(index) | - | - |
+| label | Label de la colonne. | string | — | — |
+| column-key | La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée. | string | string | — | — |
+| prop | Nom du champ de l'objet de données. Alias: `property`. | string | — | — |
+| width | Largeur de la colonne. | string | — | — |
+| min-width | Largeur minimale de la colonne. Les colonnes avec `width` ont une largeur fixe, alors que celles avec `min-width` ont une largeur proportionnellement distribuée. | string | — | — |
+| fixed | Si la colonne est fixée à droite ou à gauche. Fixée à gauche si `true`. | string/boolean | true/left/right | — |
+| render-header | Fonction de rendu pour le header de cette colonne. | Function(h, { column, $index }) | — | — |
+| sortable | Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement `sort-change` de Table. | boolean, string | true, false, custom | false |
+| sort-method | Méthode de tri, marche quand `sortable` est `true`. Doit retourner un nombre, tout comme Array.sort. | Function(a, b) | — | — |
+| sort-by | Détermine par quelle propriété effectuer le tri, marche quand `sortable` est `true` et `sort-method` est `undefined`. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. | Function(row, index)/String/Array | — | — |
+| sort-orders | Liste des stratégies de tri, marche quand `sortable` est `true`. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée. | array | Les élements du tableau doivent être parmi: `ascending`, `descending` et `null` (restaure l'état originel du tableau). | ['ascending', 'descending', null] |
+| resizable | Si la largeur de la colonne peut être modifiée, marche quand `border` de `el-table` est `true`. | boolean | — | false |
+| formatter | Fonction pour formater le contenu des cellules. | Function(row, column, cellValue, index) | — | — |
+| show-overflow-tooltip | Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule. | boolean | — | false |
+| align | Alignement. | string | left/center/right | left |
+| header-align | Alignement du header. Si omis, la valeur du `align` ci-dessus est appliqué. | String | left/center/right | — |
+| class-name | Classe des cellules dans cette colonne. | string | — | — |
+| label-class-name | Classe du label de cette colonne. | string | — | — |
+| selectable | Détermine si certaines colonnes peuvent être sélectionnées, marche quand `type` est 'selection'. | Function(row, index) | — | — |
+| reserve-selection | Si la sélection doit être conservée après rafraîchissement, marche quand `type` est 'selection'. Notez que `row-key` est requis. | boolean | — | false |
+| filters | Un tableau d'options de filtrage. Pour chaque élément, `text` et `value` sont requis. | Array[{ text, value }] | — | — |
+| filter-placement | Emplacement du menu du filtre. | String | Voir `placement` de Tooltip. | — |
+| filter-multiple | Si le filtrage supporte plusieurs options. | Boolean | — | true |
+| filter-method | Méthode de filtrage. Si `filter-multiple` est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un `true` sera renvoyé. | Function(value, row, column) | — | — |
+| filtered-value | Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec `render-header`. | Array | — | — |
+
+### Slot de Table-column
+
+| Nom | Description |
+|------|--------|
+| — | Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index } |
+| header | Contenu personnalisé pour le header. Le paramètre de scope est { column, $index } |

examples/docs/fr-FR/tabs.md

@@ -0,0 +1,400 @@
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'second',
+        activeName2: 'first',
+        editableTabsValue: '2',
+        editableTabsValue2: '2',
+        editableTabs: [{
+          title: 'Onglet 1',
+          name: '1',
+          content: 'Contenu de l\'onglet 1'
+        }, {
+          title: 'Onglet 2',
+          name: '2',
+          content: 'Contenu de l\'onglet 2'
+        }],
+        editableTabs2: [{
+          title: 'Onglet 1',
+          name: '1',
+          content: 'Contenu de l\'onglet 1'
+        }, {
+          title: 'Onglet 2',
+          name: '2',
+          content: 'Contenu de l\'onglet 2'
+        }],
+        tabIndex: 2,
+        tabPosition: 'top'
+      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
+      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);
+        }
+      },
+      addTab(targetName) {
+        let newTabName = ++this.tabIndex + '';
+        this.editableTabs2.push({
+          title: 'Nouvel onglet',
+          name: newTabName,
+          content: 'Contenu du nouvel onglet'
+        });
+        this.editableTabsValue2 = newTabName;
+      },
+      removeTab(targetName) {
+        let tabs = this.editableTabs2;
+        let activeName = this.editableTabsValue2;
+        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.editableTabsValue2 = activeName;
+        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+      }
+    }
+  }
+</script>
+
+## 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: 'top'
+      };
+    }
+  };
+</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(editableTabsValue2)"
+  >
+    Ajouter un onglet
+  </el-button>
+</div>
+<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+  <el-tab-pane
+    v-for="(item, index) in editableTabs2"
+    :key="item.name"
+    :label="item.title"
+    :name="item.name"
+  >
+    {{item.content}}
+  </el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue2: '2',
+        editableTabs2: [{
+          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.editableTabs2.push({
+          title: 'Nouvel onglet',
+          name: newTabName,
+          content: 'Contenu du nouvel onglet'
+        });
+        this.editableTabsValue2 = newTabName;
+      },
+      removeTab(targetName) {
+        let tabs = this.editableTabs2;
+        let activeName = this.editableTabsValue2;
+        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.editableTabsValue2 = activeName;
+        this.editableTabs2 = 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 de l'onglet, 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  |

examples/docs/fr-FR/tag.md

@@ -0,0 +1,217 @@
+<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' }
+        ],
+        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>
+
+<style>
+  .demo-box.demo-tag {
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+    .button-new-tag {
+      margin-left: 10px;
+      height: 32px;
+      line-height: 30px;
+      padding: 0 *;
+    }
+    .input-new-tag {
+      width: 90px;
+      margin-left: 10px;
+      vertical-align: bottom;
+    }
+  }
+</style>
+
+## 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>
+```
+:::
+
+### 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 | — |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| click | Se déclenche quand le tag est cliqué. | — |
+| close | Se déclenche quand le tag est supprimé. | — |

examples/docs/fr-FR/time-picker.md

@@ -0,0 +1,227 @@
+<style>
+  .demo-box {
+    .el-date-editor + .el-date-editor {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 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="value1"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30'
+  }"
+  placeholder="Choisissez un horaire">
+</el-time-select>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: ''
+      };
+    }
+  }
+</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="value2"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Horaire libre">
+  </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value3"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Horaire libre">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: 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 si 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="value4"
+    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="value5"
+    range-separator="To"
+    start-placeholder="Horaire de début"
+    end-placeholder="Horaire de fin">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+      };
+    }
+  }
+</script>
+```
+:::
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: '',
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40),
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        startTime: '',
+        endTime: ''
+      };
+    }
+  }
+</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. | - |

examples/docs/fr-FR/tooltip.md

@@ -0,0 +1,243 @@
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-tooltip.demo-en-US {
+    &:first-of-type .source {
+      .el-button {
+        width: 110px;
+      }
+    }
+    .el-tooltip + .el-tooltip {
+      margin-left: 15px;
+    }
+    .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-tooltip {
+        margin-left: 0;
+      }
+    }
+  }
+</style>
+
+## 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>
+
+<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 |

examples/docs/fr-FR/transfer.md

@@ -0,0 +1,333 @@
+<style>
+  .demo-transfer {
+    .transfer-footer {
+      margin-left: 15px;
+      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;
+      };
+      const generateData2 = _ => {
+        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;
+      };
+      const generateData3 = _ => {
+        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(),
+        data2: generateData2(),
+        data3: generateData3(),
+        value1: [1, 4],
+        value2: [],
+        value3: [1],
+        value4: [1],
+        value5: [],
+        filterMethod(query, item) {
+          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
+        },
+        renderFunc(h, option) {
+          return <span>{ option.key } - { option.label }</span>;
+        }
+      };
+    },
+
+    methods: {
+      handleChange(value, direction, movedKeys) {
+        console.log(value, direction, movedKeys);
+      }
+    }
+  };
+</script>
+
+## 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="value1"
+    :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(),
+        value1: [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="value2"
+    :data="data2">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData2 = _ => {
+        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 {
+        data2: generateData2(),
+        value2: [],
+        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="value3"
+      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(),
+        value3: [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="value5"
+    :props="{
+      key: 'value',
+      label: 'desc'
+    }"
+    :data="data3">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData3 = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            value: i,
+            desc: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data3: generateData3(),
+        value5: []
+      };
+    }
+  };
+</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. Si 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é. |

examples/docs/fr-FR/transition.md

@@ -0,0 +1,180 @@
+## 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)
+```
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    margin-right: 20px;
+    box-sizing: border-box;
+  }
+</style>
+
+<script>
+  module.exports = {
+    data: () => ({
+      show: true,
+      show2: true,
+      show3: true
+    })
+  }
+</script>

examples/docs/fr-FR/tree.md

@@ -0,0 +1,1254 @@
+<style>
+  .demo-tree {
+    .leaf {
+      width: 20px;
+      background: #ddd;
+    }
+
+    .folder {
+      width: 20px;
+      background: #888;
+    }
+
+    .buttons {
+      margin-top: 20px;
+    }
+
+    .filter-tree {
+      margin-top: 20px;
+    }
+
+    .custom-tree-container {
+      display: flex;
+      margin: -24px;
+    }
+
+    .block {
+      flex: 1;
+      padding: 8px 24px 24px;
+
+      &:first-child {
+        border-right: solid 1px #eff2f6;
+      }
+
+      > p {
+        text-align: center;
+        margin: 0;
+        line-height: 4;
+      }
+    }
+
+    .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
+  }
+</style>
+
+<script>
+  const 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'
+      }]
+    }]
+  }];
+
+  const data2 = [{
+    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'
+    }]
+  }];
+
+  const data3 = [{
+    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
+      }]
+    }]
+  }];
+
+  const data6 = [{
+    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'
+      }]
+    }]
+  }];
+
+  let id = 1000;
+
+  const regions = [{
+    'name': 'region1'
+  }, {
+    'name': 'region2'
+  }];
+
+  let count = 1;
+
+  const props = {
+    label: 'name',
+    children: 'zones'
+  };
+
+  const props1 = {
+    label: 'name',
+    children: 'zones',
+    isLeaf: 'leaf'
+  };
+
+  const defaultProps = {
+    children: 'children',
+    label: 'label'
+  };
+
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree2.filter(val);
+      }
+    },
+
+    methods: {
+      handleCheckChange(data, checked, indeterminate) {
+        console.log(data, checked, indeterminate);
+      },
+      handleNodeClick(data) {
+        console.log(data);
+      },
+      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;
+      },
+      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(function() {
+          let data;
+          if (hasChild) {
+            data = [{
+              name: 'zone' + count++
+            }, {
+              name: 'zone' + count++
+            }];
+          } else {
+            data = [];
+          }
+
+          resolve(data);
+        }, 500);
+      },
+      loadNode1(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);
+      },
+      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([]);
+      },
+      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>);
+      },
+
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
+    },
+
+    data() {
+      return {
+        data,
+        data2,
+        data3,
+        data4: JSON.parse(JSON.stringify(data2)),
+        data5: JSON.parse(JSON.stringify(data2)),
+        data6,
+        regions,
+        defaultProps,
+        props,
+        props1,
+        defaultCheckedKeys: [5],
+        defaultExpandedKeys: [2, 3],
+        filterText: ''
+      };
+    }
+  };
+</script>
+
+## 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 cate 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="props1"
+  :load="loadNode1"
+  lazy
+  show-checkbox>
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props1: {
+          label: 'name',
+          children: 'zones',
+          isLeaf: 'leaf'
+        },
+      };
+    },
+    methods: {
+      loadNode1(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="data3"
+  :props="defaultProps"
+  show-checkbox
+  @check-change="handleCheckChange">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data3: [{
+          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="data2"
+  show-checkbox
+  node-key="id"
+  :default-expanded-keys="[2, 3]"
+  :default-checked-keys="[5]"
+  :props="defaultProps">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data2: [{
+          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="data2"
+  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 {
+        data2: [{
+          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="data4"
+      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="data5"
+      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 {
+        data4: JSON.parse(JSON.stringify(data)),
+        data5: 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="data2"
+  :props="defaultProps"
+  default-expand-all
+  :filter-node-method="filterNode"
+  ref="tree2">
+</el-tree>
+
+<script>
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree2.filter(val);
+      }
+    },
+
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
+    },
+
+    data() {
+      return {
+        filterText: '',
+        data2: [{
+          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="data6"
+  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 {
+        data6: [{
+          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 tout les noeud 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 qaund `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 executé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   | Accepted Values | 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 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 }. |

examples/docs/fr-FR/typography.md

@@ -0,0 +1,150 @@
+<style>
+  .demo-typo-box {
+    height: 200px;
+    width: 200px;
+    position: relative;
+    border: 1px solid #eaeefb;
+    font-size: 40px;
+    color: #1f2d3d;
+    text-align: center;
+    line-height: 162px;
+    padding-bottom: 36px;
+    box-sizing: border-box;
+    display: inline-block;
+    margin-right: 17px;
+    border-radius: 4px;
+
+    .name {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 35px;
+      border-top: 1px solid #eaeefb;
+      font-size: 14px;
+      color: #8492a6;
+      line-height: 35px;
+      text-align: left;
+      text-indent: 10px;
+      font-family: 'Helvetica Neue';
+    }
+  }
+  .demo-typo-size {
+    .h1 {
+      font-size: 20px;
+    }
+    .h2 {
+      font-size: 18px;
+    }
+    .h3 {
+      font-size: 16px;
+    }
+    .text-regular {
+      font-size: 14px;
+    }
+    .text-small {
+      font-size: 13px;
+    }
+    .text-smaller {
+      font-size: 12px;
+    }
+    .color-dark-light {
+      color: #99a9bf;
+    }
+  }
+  .typo-PingFang {
+    font-family: 'PingFang SC';
+  }
+  .typo-Hiragino {
+    font-family: 'Hiragino Sans GB';
+  }
+  .typo-Microsoft {
+    font-family: 'Microsoft YaHei';
+  }
+  /* 英文 \*/
+  .typo-Helvetica-Neue {
+    font-family: 'Helvetica Neue';
+  }
+  .typo-Helvetica {
+    font-family: 'Helvetica';
+  }
+  .typo-Arial {
+    font-family: 'Arial';
+  }
+</style>
+
+## Typographie
+
+Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.
+
+### Police chinoise
+
+<div class="demo-typo-box typo-PingFang">
+  和畅惠风
+  <div class="name">PingFang SC</div>
+</div>
+<div class="demo-typo-box typo-Hiragino">
+  和畅惠风
+  <div class="name">Hiragino Sans GB</div>
+</div>
+<div class="demo-typo-box typo-Microsoft">
+  和畅惠风
+  <div class="name">Microsoft YaHei</div>
+</div>
+
+### Police anglaise / numérique
+
+<div class="demo-typo-box typo-Helvetica-neue">
+  RGag
+  <div class="name">Helvetica Neue</div>
+</div>
+<div class="demo-typo-box typo-Helvetica">
+  RGag
+  <div class="name">Helvetica</div>
+</div>
+<div class="demo-typo-box typo-Arial">
+  RGag
+  <div class="name">Arial</div>
+</div>
+
+### Font-family
+
+```css
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+```
+
+### Convention des polices
+
+<table class="demo-typo-size">
+  <tbody>
+    <tr>
+      <td class="h1">Titre principal</td>
+      <td class="h1">Construit avec Element</td>
+      <td class="color-dark-light">20px  Extra large</td>
+    </tr>
+    <tr>
+      <td class="h2">Titre</td>
+      <td class="h2">Construit avec Element</td>
+      <td class="color-dark-light">18px large</td>
+    </tr>
+    <tr>
+      <td class="h3">Sous-titre</td>
+      <td class="h3">Construit avec Element</td>
+      <td class="color-dark-light">16px Medium</td>
+    </tr>
+    <tr>
+      <td class="text-regular">Body</td>
+      <td class="text-regular">Construit avec Element</td>
+      <td class="color-dark-light">14px Small</td>
+    </tr>
+    <tr>
+      <td class="text-small">Body (petit)</td>
+      <td class="text-small">Construit avec Element</td>
+      <td class="color-dark-light">13px Extra Small</td>
+    </tr>
+    <tr>
+      <td class="text-smaller">Texte supplémentaire</td>
+      <td class="text-smaller">Construit avec Element</td>
+      <td class="color-dark-light">12px Extra Extra Small</td>
+    </tr>
+  </tbody>
+</table>

examples/docs/fr-FR/upload.md

@@ -0,0 +1,437 @@
+<style>
+  .upload-tip {
+    color: #8492a6;
+    font-size: 12px;
+    margin-top: 7px;
+  }
+  .demo-box {
+    margin-bottom: 24px;
+
+    .upload-demo {
+      width: 360px;
+    }
+    .avatar-uploader {
+      .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+
+        &:hover, &:focus {
+          border-color: #409EFF;
+        }
+      }
+      .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: @width;
+        line-height: @height;
+        text-align: center;
+      }
+      .avatar {
+        width: 178px;
+        height: @width;
+        display: block;
+      }
+    }
+  }
+</style>
+
+<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'
+        }],
+        fileList2: [{
+          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'
+        }],
+        fileList3: [{
+          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'
+        }],
+        imageUrl: '',
+        dialogImageUrl: '',
+        dialogVisible: false
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      beforeUpload(file) {
+        if (file.size > 40000000) {
+          console.warn(file.name + ' is too large!');
+          return false;
+        }
+        return true;
+      },
+      handlePreview(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      submitUpload() {
+        this.$refs.upload.submit();
+      },
+      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;
+      },
+      handleChange(file, fileList) {
+        this.fileList3 = fileList.slice(-3);
+      },
+      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>
+
+## 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>
+```
+:::
+
+### 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="fileList2"
+  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 {
+        fileList2: [{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="fileList3">
+  <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 {
+        fileList3: [{
+          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.fileList3 = 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. |  —  |

examples/i18n/component.json

@@ -91,5 +91,36 @@
     "nav": {
       "dropdown": "Versión: "
     }
+  },
+  {
+    "lang": "fr-FR",
+    "demo-block": {
+      "hide-text": "Réduire",
+      "show-text": "Agrandir",
+      "button-text": "Essayez!",
+      "tooltip-text": "Essayer cette démo sur jsfiddle.net"
+    },
+    "footer": {
+      "links": "Liens",
+      "repo": "GitHub",
+      "community": "Communauté",
+      "changelog": "Changelog",
+      "theme": "Générateur de thème (CLI)",
+      "preview": "Générateur de thème en ligne",
+      "faq": "FAQ",
+      "gitter": "Gitter",
+      "starter": "Kit de démarrage",
+      "feedback": "Commentaires",
+      "contribution": "Contribution",
+      "eleme": "Eleme"
+    },
+    "header": {
+      "guide": "Guide",
+      "components": "Composants",
+      "resource": "Ressources"
+    },
+    "nav": {
+      "dropdown": "Version: "
+    }
   }
 ]

examples/i18n/page.json

@@ -274,5 +274,98 @@
         "placeholder2": "Se están desarrollando más recursos"
       }
     }
+  },
+  {
+    "lang": "fr-FR",
+    "pages": {
+      "index": {
+        "1": "Un kit de composants d'interface pour le web",
+        "2": "Element, une bibliothèque de composants web basée sur Vue 2.0 pour les développeurs, designers et chef de produits.",
+        "3": "Guide",
+        "4": "Comprendre le design, aider les designers à concevoir un produit adapté, structuré et facile d'utilisation.",
+        "5": "Détails",
+        "6": "Composants",
+        "7": "Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.",
+        "8": "Ressources",
+        "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
+        "9": "Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.",
+        "lang": "fr-FR",
+        "titleSize": "34",
+        "paraSize": "18"
+      },
+      "component": {},
+      "changelog": {
+        "1": "Changelog",
+        "2": "fr-FR"
+      },
+      "design": {
+        "1": "Principes de conception",
+        "2": "Cohérence",
+        "3": "",
+        "4": "Feedback",
+        "5": "",
+        "6": "Efficacité",
+        "7": "",
+        "8": "Controlabilité",
+        "9": "",
+        "10": "Cohérence",
+        "11": "Cohérence avec la vraie vie: ",
+        "12": "en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs.",
+        "13": "Cohérence au sein de l'interface: ",
+        "14": "tout les élements doivent être cohérents entre eux et suivre les même règles, par exemple: le style global, les icônes, la position des élements, etc.",
+        "15": "Feedback",
+        "16": "Retour d'expèrience: ",
+        "17": "permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.",
+        "18": "Retour visuel: ",
+        "19": "reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.",
+        "20": "Efficacité",
+        "21": "Simplifier le processus: ",
+        "22": "garde chaque operation simple et intuitive.",
+        "23": "Clair et défini: ",
+        "24": "énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement.",
+        "25": "Facile à identifier: ",
+        "26": "l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.",
+        "27": "Controllabilité",
+        "28": "Prise de décision: ",
+        "29": "possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs",
+        "30": "Contrôle des conséquences: ",
+        "31": "les utilisateurs devraient pouvoir controller l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes."
+      },
+      "guide": {
+        "1": "Principes de conception",
+        "2": "Navigation"
+      },
+      "nav": {
+        "1": "Navigation",
+        "2": "La navigation a pour but de guider les utilisateurs pour qu'ils sachent ou aller et comment y parvenir. En général on peut distinguer deux types de navigation: le menu latéral ou 'sidebar' et le menu en haut de page ou 'topbar'.",
+        "3": "Choisir la bonne navigation",
+        "4": "Une navigation appropriée procure à l'utilisation une expèrience facile et fluide, alors qu'une mauvaise navigation entraîne de la confusion. Voici les différences entre les navigations 'sidebar' et 'topbar'",
+        "5": "Menu latéral",
+        "6": "Fixe la navigation sur le coté gauche, améliorant ainsi sa visibilité et facilitant le passage d'une page à l'autre. Dans ce cas, la zone en haut de la page peut contenir une barre de recherche, des liens vers de la documentation, des contacts, des boutons d'aide, etc. Utile pour des interfaces de gestion ou des sites utilitaires.",
+        "7": "Catégories de niveau 1",
+        "8": "Appropriées pour des sites avec une structure simple et un seul niveau de page. L'affichage du chemin de navigation n'est pas néccessaire.",
+        "9": "Catégories de niveau 2",
+        "10": "Le menu affiche au moins deux niveaux de navigation. Dans ce cas l'affichage du chemin de navigation est recommandé, afin que l'utilisateur sache facilement ou il se trouve.",
+        "11": "Catégories de niveau 3",
+        "12": "Appropriées pour les sites web complexes. La barre la plus à gauche gère le premier niveau de navigation, tandis que celle à coté gère le deuxième niveau ansi que d'autres options.",
+        "13": "Menu en haut de page",
+        "14": "Conforme à l'ordre normal de navigation qui va de haut en bas, ce qui rends les choses plus naturelles. Les quantités de liens et de texte sont limités par la largeur de la barre.",
+        "15": "Approprié pour les sites ayant une navigation simple et un contenu large."
+      },
+      "resource": {
+        "1": "Resources",
+        "2": "En construction.",
+        "3": "Composants Axure",
+        "4": "En important ELement UI dans Axure, vous pourrez facilement utiliser les composants durant le design des interactions",
+        "5": "Téléchargement",
+        "6": "Modèle de croquis",
+        "7": "Applique des composants d'un template Element, afin d'améliorer l'efficacité du design tout en gardant un style visuel unifié.",
+        "8": "Documentation du design des interactions",
+        "9": "Jetez un oeil à la documentation du design des interactions. Obtenez des détails sur chaque composant.",
+        "paraHeight": "1.6",
+        "placeholder1": "En construction",
+        "placeholder2": "Plus de ressources sont en développement."
+      }
+    }
   }
 ]

examples/i18n/route.json

@@ -7,5 +7,8 @@
   },
   {
     "lang": "es"
+  },
+  {
+    "lang": "fr-FR"
   }
 ]

examples/i18n/title.json

@@ -16,5 +16,11 @@
     "guide": "Guía | Element",
     "component": "Componentes | Element",
     "resource": "Recursos | Element"
+  },
+  "fr-FR": {
+    "home": "Element - Un kit de composants d'interface pour le web",
+    "guide": "Guide | Element",
+    "component": "Composants | Element",
+    "resource": "Ressources | Element"
   }
 }

examples/nav.config.json

@@ -760,5 +760,255 @@
         }
       ]
     }
+  ],
+  "fr-FR": [
+    {
+      "name": "Changelog",
+      "path": "/changelog"
+    },
+    {
+      "name": "Element pour React",
+      "href": "https://elemefe.github.io/element-react/"
+    },
+    {
+      "name": "Element pour Angular",
+      "href": "https://element-angular.faas.ele.me/"
+    },
+    {
+      "name": "Développement",
+      "children": [
+        {
+          "path": "/installation",
+          "name": "Installation"
+        },
+        {
+          "path": "/quickstart",
+          "name": "Démarrer"
+        },
+        {
+          "path": "/i18n",
+          "name": "Internationalisation"
+        },
+        {
+          "path": "/custom-theme",
+          "name": "Thème"
+        },
+        {
+          "path": "/transition",
+          "name": "Transitions"
+        }
+      ]
+    },
+    {
+      "name": "Composants",
+      "groups": [
+        {
+          "groupName": "Basiques",
+          "list": [
+            {
+              "path": "/layout",
+              "title": "Layout"
+            },
+            {
+              "path": "/container",
+              "title": "Layout Container"
+            },
+            {
+              "path": "/color",
+              "title": "Color"
+            },
+            {
+              "path": "/typography",
+              "title": "Typography"
+            },
+            {
+              "path": "/icon",
+              "title": "Icon"
+            },
+            {
+              "path": "/button",
+              "title": "Button"
+            }
+          ]
+        },
+        {
+          "groupName": "Formulaire",
+          "list": [
+            {
+              "path": "/radio",
+              "title": "Radio"
+            },
+            {
+              "path": "/checkbox",
+              "title": "Checkbox"
+            },
+            {
+              "path": "/input",
+              "title": "Input"
+            },
+            {
+              "path": "/input-number",
+              "title": "InputNumber"
+            },
+            {
+              "path": "/select",
+              "title": "Select"
+            },
+            {
+              "path": "/cascader",
+              "title": "Cascader"
+            },
+            {
+              "path": "/switch",
+              "title": "Switch"
+            },
+            {
+              "path": "/slider",
+              "title": "Slider"
+            },
+            {
+              "path": "/time-picker",
+              "title": "TimePicker"
+            },
+            {
+              "path": "/date-picker",
+              "title": "DatePicker"
+            },
+            {
+              "path": "/datetime-picker",
+              "title": "DateTimePicker"
+            },
+            {
+              "path": "/upload",
+              "title": "Upload"
+            },
+            {
+              "path": "/rate",
+              "title": "Rate"
+            },
+            {
+              "path": "/color-picker",
+              "title": "ColorPicker"
+            },
+            {
+              "path": "/transfer",
+              "title": "Transfer"
+            },
+            {
+              "path": "/form",
+              "title": "Form"
+            }
+          ]
+        },
+        {
+          "groupName": "Données",
+          "list": [
+            {
+              "path": "/table",
+              "title": "Table"
+            },
+            {
+              "path": "/tag",
+              "title": "Tag"
+            },
+            {
+              "path": "/progress",
+              "title": "Progress"
+            },
+            {
+              "path": "/tree",
+              "title": "Tree"
+            },
+            {
+              "path": "/pagination",
+              "title": "Pagination"
+            },
+            {
+              "path": "/badge",
+              "title": "Badge"
+            }
+          ]
+        },
+        {
+          "groupName": "Notifier",
+          "list": [
+            {
+              "path": "/alert",
+              "title": "Alert"
+            },
+            {
+              "path": "/loading",
+              "title": "Loading"
+            },
+            {
+              "path": "/message",
+              "title": "Message"
+            },
+            {
+              "path": "/message-box",
+              "title": "MessageBox"
+            },
+            {
+              "path": "/notification",
+              "title": "Notification"
+            }
+          ]
+        },
+        {
+          "groupName": "Navigation",
+          "list": [
+            {
+              "path": "/menu",
+              "title": "NavMenu"
+            },
+            {
+              "path": "/tabs",
+              "title": "Tabs"
+            },
+            {
+              "path": "/breadcrumb",
+              "title": "Breadcrumb"
+            },
+            {
+              "path": "/dropdown",
+              "title": "Dropdown"
+            },
+            {
+              "path": "/steps",
+              "title": "Steps"
+            }
+          ]
+        },
+        {
+          "groupName": "Autres",
+          "list": [
+            {
+              "path": "/dialog",
+              "title": "Dialog"
+            },
+            {
+              "path": "/tooltip",
+              "title": "Tooltip"
+            },
+            {
+              "path": "/popover",
+              "title": "Popover"
+            },
+            {
+              "path": "/card",
+              "title": "Card"
+            },
+            {
+              "path": "/carousel",
+              "title": "Carousel"
+            },
+            {
+              "path": "/collapse",
+              "title": "Collapse"
+            }
+          ]
+        }
+      ]
+    }
   ]
 }

examples/route.config.js

@@ -16,6 +16,11 @@ const LOAD_MAP = {
     return r => require.ensure([], () =>
       r(require(`./pages/es/${name}.vue`)),
     'es');
+  },
+  'fr-FR': name => {
+    return r => require.ensure([], () =>
+      r(require(`./pages/fr-FR/${name}.vue`)),
+    'fr-FR');
   }
 };
 
@@ -38,6 +43,11 @@ const LOAD_DOCS_MAP = {
     return r => require.ensure([], () =>
       r(require(`./docs/es${path}.md`)),
     'es');
+  },
+  'fr-FR': path => {
+    return r => require.ensure([], () =>
+      r(require(`./docs/fr-FR${path}.md`)),
+    'fr-FR');
   }
 };
 
@@ -146,6 +156,8 @@ if (userLanguage.indexOf('zh-') !== -1) {
   defaultPath = '/zh-CN';
 } else if (userLanguage.indexOf('es') !== -1) {
   defaultPath = '/es';
+} else if (userLanguage.indexOf('fr') !== -1) {
+  defaultPath = '/fr-FR';
 }
 
 route = route.concat([{