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

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

@@ -136,6 +136,11 @@
             search: 'Buscar',
             empty: 'No hay datos que coincidan',
             index: 'es'
+          },
+          'fr-FR': {
+            search: 'Rechercher',
+            empty: 'Aucun résultat',
+            index: 'fr'
           }
         }
       };

examples/docs/fr-FR/alert.md

+<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

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

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

+<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

+<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

+<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/collapse.md

+<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

+<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

+<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

+<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

+## 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/installation.md

+## 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/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/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"
   }
 }