test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-29 18:57:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

I18n: French translation (#12153)

Browse Source 
* 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
This commit is contained in:
Simon Malesys 2019-02-12 02:08:19 +01:00 committed by Zhi Cun
parent f598d9ba9f
commit 958efaefc3
60 changed files with 19473 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

873
CHANGELOG.fr-FR.md Normal file
View File

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

4
examples/app.vue
View File

@ -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);
}

3
examples/components/header.vue
View File

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

5
examples/components/search.vue
View File

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

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

@ -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. | — |

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

@ -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 | — |

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

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

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

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

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

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

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

@ -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 | — | — |

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

File diff suppressed because it is too large Load Diff

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

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

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

@ -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 | — | — |

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

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

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

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

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

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

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

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

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

@ -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é. |

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

@ -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. | — |

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

@ -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. | — |

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

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

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

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

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

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

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

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

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

@ -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. | — |

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

@ -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. | — |

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

@ -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).

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

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

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

@ -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 | — | — |

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

@ -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 | — | — |

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

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

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

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

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

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

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

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

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

@ -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. | — |

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

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

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

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

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

@ -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 | — | — |

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

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

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

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

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

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

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

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

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

@ -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. | —

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

File diff suppressed because it is too large Load Diff

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

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

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

@ -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é. | — |

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

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

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

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

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

@ -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é. |

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

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

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

File diff suppressed because it is too large Load Diff

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

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

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

@ -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. | — |

31
examples/i18n/component.json
View File

@ -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: "
}
}
]

93
examples/i18n/page.json
View File

@ -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."
}
}
}
]

3
examples/i18n/route.json
View File

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

6
examples/i18n/title.json
View File

@ -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"
}
}

250
examples/nav.config.json
View File

@ -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"
}
]
}
]
}
]
}

12
examples/route.config.js
View File

@ -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([{