Commit 37c0a9fb authored by Baptiste Lombard's avatar Baptiste Lombard Committed by Zhi Cun

Docs: Update french translation (#16208)

* First round of correction

* Second round

* Cascader and form translation

* Last big round of changes

* Update changelog
parent e1cd0380
...@@ -4,114 +4,114 @@ ...@@ -4,114 +4,114 @@
*2019-06-21* *2019-06-21*
#### Bug fixes #### Correction de bugs
- Chore - Chore
- Fix TS definitions file (#15805 by @NateScarlet) - Correction du fichier de définitions TS (#15805 by @NateScarlet)
### 2.9.1 ### 2.9.1
*2019-05-30* *2019-05-30*
#### New features #### Nouvelles fonctionnalités
- Table - Table
- tree-props,default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung) - les événements tree-props,default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change sont pris en charge dans Tree Table (#15709 by @ziyoung)
#### Bug fixes #### Correction de bugs
- Table - Table
- Fix some bugs (#15709 by @ziyoung) - Correction de quelques bugs (#15709 by @ziyoung)
- Theme - Theme
- Update api host (#15784 by @iamkun) - Mise à jour de l'hôte api (#15784 by @iamkun)
#### Optimization #### Optimisation
- Chore - Chore
- Update InfiniteScroll type (#15794 by @iamkun) - Mise à jour de InfiniteScroll type (#15794 by @iamkun)
### 2.9.0 ### 2.9.0
*2019-05-30* *2019-05-30*
#### New features #### Nouvelles fonctionnalités
- Backtop - Backtop
- Add Backtop component (#15541 by @iamkun) - Ajout du composant Backtop (#15541 by @iamkun)
- PageHeader - PageHeader
- Add PageHeader component (#15714 by @ziyoung) - Ajout du composant PageHeader (#15714 by @ziyoung)
- InfiniteScroll - InfiniteScroll
- Add InfiniteScroll directive (#15567 by @iamkun) - Ajout de la directive InfiniteScroll (#15567 by @iamkun)
- Cascader - Cascader
- Add multiple mode and filter-method (#15611 by @SimonaliaChen) - Ajouter plusieurs mode et filter-method (#15611 by @SimonaliaChen)
- Message - Message
- Display in stack mode (#15639 by @island205) - Affichage en mode pile (#15639 by @island205)
- Tag - Tag
- Add prop effect (#15725 by @SimonaliaChen) - Ajout d'un effet de prop (#15725 by @SimonaliaChen)
- Tabs - Tabs
- Left align title when type is card (#15695 by @luckyCao) - Aligner le titre à gauche lorsque le type est carte (#15695 by @luckyCao)
- DatePicker - DatePicker
- Support literal strings (#15525 by island205) - Supporte les chaînes de caractères littérales (#15525 by island205)
- Image - Image
- Add support for transmit attrs and listeners (#15578 by @VanMess) - Ajout du support pour les attributs de transmission et listeners (#15578 by @VanMess)
- Theme - Theme
- Add popup background (#15412 by @iamkun) - Ajout d'un popup en arrière plan (#15412 by @iamkun)
- Chore - Chore
- Update new 2.9.0 index page (#15682 by @iamkun) - Mise à jour de la nouvelle page d'index 2.9.0 (#15682 by @iamkun)
#### Bug fixes #### Correction de bugs
- Table - Table
- Fix sort-change behaviour when sort condition is null (#15012 by @joelxr) - Correction du comportement de sort-change lorsque la condition de tri est nulle (#15012 by @joelxr)
- Image - Image
- Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen) - Correction de la compatibilité ssr et object-fit (#15346 by @SimonaliaChen)
- Input - Input
- Fix show-word-count style in el-form (#15359 by @lvjiaxuan) - Correction du style de show-word-count dans el-form (#15359 by @lvjiaxuan)
- Fix clear icon is not centered (#15354 by @YiiGuxing) - Correction de l'icône d'erreur pas centrée (#15354 by @YiiGuxing)
- Calendar - Calendar
- Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue) - Correction du mauvais jour de la semaine quand le jour est dimanche (#15399 by @qingdengyue)
- Fix October disappear bug (#15394 by @qingdengyue) - Correction du bug de disparition d'octobre (#15394 by @qingdengyue)
- Tabs - Tabs
- Fix basic tab nested in card tab padding error (#15461 by @SimonaliaChen) - Correction de l'onglet de base imbriqué dans l'erreur de remplissage de card (#15461 by @SimonaliaChen)
- Tag - Tag
- Fix stop propagation problem (#15150 by @infjer) - Correction du problème de propagation d'arrêt (#15150 by @infjer)
- Form - Form
- Fix input-group within form-item height error (#15457 by @SimonaliaChen) - Correction de input-group dans l'erreur de hauteur de form-item (#15457 by @SimonaliaChen)
- Fix resetFields issue (15181 by @luckyCao) - Résolution de l'issue de resetFields (15181 by @luckyCao)
- Tooltip - Tooltip
- Fix custom tabindex not work (#15619 by @SimonaliaChen ) - Correction de tabindex personnalisé ne fonctionnant pas (#15619 by @SimonaliaChen )
- Link - Link
- Fix link icon style class (#15752 by @iamkun) - Correction de la classe de style d'icône (#15752 by @iamkun)
- Select - Select
- Revert set value to null when cleared (#15447 by @iamkun) - Revert définit la valeur à null une fois effacée (#15447 by @iamkun)
- Loading - Loading
- Fix dom not change when loading state change quickly (#15123 by @FAKER-A) - Résolution du problème de mise à jour de dom lorsque l'état de chargement change rapidement (#15123 by @FAKER-A)
- Switch - Switch
- Label with el-switch repeating event (#15178 by @FAKER-A) - Label avec les événements récurrents el-switch (#15178 by @FAKER-A)
- Slider - Slider
- Fix style problem when clicking slider bar(#15561 by @luckyCao) - Correction d'un problème de style lorsque la barre de défilement est cliquée (#15561 by @luckyCao)
- Radio - Radio
- Fix issue 14808 (#14809 by @OverTree) - Résolution de l'issue 14808 (#14809 by @OverTree)
- Form - Form
- Fix resetFields issue (15181 by @luckyCao) - Résolution du problème de resetFields (15181 by @luckyCao)
- Chore - Chore
- Upgrade dependencies and fix demo bug (#15324 by ziyoung) - Mise à jour des dépendances et corrige le bug de démonstration (#15324 by ziyoung)
- Type - Type
- Fix loading type definition (#15635 by @iamkun) - Correction du type de chargement (#15635 by @iamkun)
- Fix Icon type (#15634 by @iamkun) - Correction du type d'icône (#15634 by @iamkun)
- Fix Link type definition (#15402 by @iamkun) - Fixe la définition du type de lien (#15402 by @iamkun)
#### Optimization #### Optimisation
- Cascader - Cascader
- Refactor (#15611 by @SimonaliaChen) - Refactor (#15611 by @SimonaliaChen)
- Chore - Chore
- Update make new component logic (by @iamkun) - Mise à jour de la logique du nouveau composant (by @iamkun)
- Docs - Docs
- Rename variable in docs (#15185 by @liupl) - Renommage de variables dans la documentation (#15185 by @liupl)
- Fix image attribute type and default value (#15423 by @haoranyu) - Correction du type d'attribut d'image et de la valeur par défaut (#15423 by @haoranyu)
- Fix form doc bug (#15228 by @SHERlocked93) - Correction d'un bug de formulaire (#15228 by @SHERlocked93)
### 2.8.2 ### 2.8.2
*2019-04-25* *2019-04-25*
...@@ -254,7 +254,7 @@ Docs ...@@ -254,7 +254,7 @@ Docs
- Form - Form
- Correction du style de `label-width` auto (#14955 par @ziyoung) - Correction du style de `label-width` auto (#14955 par @ziyoung)
#### Optimisation #### Optimisation
- Docs - Docs
- Correction d'une erreur de lien img (#14957 par @iamkun) - Correction d'une erreur de lien img (#14957 par @iamkun)
...@@ -277,7 +277,7 @@ Docs ...@@ -277,7 +277,7 @@ Docs
- Couleur d'arrière-plan configurable (#14939 par @ziyoung) - Couleur d'arrière-plan configurable (#14939 par @ziyoung)
- Form - Form
- `label-width` supporte la largeur automatique (#14944 by @ziyoung) - `label-width` supporte la largeur automatique (#14944 by @ziyoung)
#### Optimisation #### Optimisation
- Docs - Docs
- Mise à jour de la documentation en espagnol (#14913 par @Gonzalo2310) - Mise à jour de la documentation en espagnol (#14913 par @Gonzalo2310)
...@@ -456,7 +456,7 @@ Docs ...@@ -456,7 +456,7 @@ Docs
#### Breaking changes #### Breaking changes
- Table - Table
- Fix params order of row events (by @jikkai in #12086) - Fix params order of row events (by @jikkai in #12086)
### 2.5.4 ### 2.5.4
*2019-02-01* *2019-02-01*
......
...@@ -155,6 +155,7 @@ Spanish documentation is made possible by these community developers: ...@@ -155,6 +155,7 @@ Spanish documentation is made possible by these community developers:
French documentation is made possible by these community developers: French documentation is made possible by these community developers:
- [smalesys](https://github.com/smalesys) - [smalesys](https://github.com/smalesys)
- [blombard](https://github.com/blombard)
## Donation ## Donation
If you find Element useful, you can buy us a cup of coffee If you find Element useful, you can buy us a cup of coffee
......
...@@ -4,7 +4,7 @@ Affiche des messages importants. ...@@ -4,7 +4,7 @@ Affiche des messages importants.
### Usage ### Usage
Les Alertes sont des composants non-superposés qui ne disparaissent pas automatiquement. 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`. :::demo Les Alertes peuvent être de 4 types différents, définit par `type`, le type par défaut étant `info`.
...@@ -70,7 +70,7 @@ Personnalisez le bouton de fermeture avec du texte ou des symboles. ...@@ -70,7 +70,7 @@ Personnalisez le bouton de fermeture avec du texte ou des symboles.
```html ```html
<template> <template>
<el-alert <el-alert
title="alerte non-fermable" title="alerte non fermable"
type="success" type="success"
:closable="false"> :closable="false">
</el-alert> </el-alert>
......
## Backtop ## Backtop
A button to back to top Un bouton pour revenir en haut de la page
### Basic usage ### Basic usage
Scroll down to see the bottom-right button. Scrollez en bas de la page pour voir le bouton en bas à droite.
:::demo :::demo
```html ```html
<template> <template>
Scroll down to see the bottom-right button. Scrollez en bas de la page pour voir le bouton en bas à droite.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template> </template>
``` ```
...@@ -18,12 +18,12 @@ Scroll down to see the bottom-right button. ...@@ -18,12 +18,12 @@ Scroll down to see the bottom-right button.
### Customizations ### Customizations
Display area is 40px \* 40px. La zone d'affichage est de 40px \* 40px.
:::demo :::demo
```html ```html
<template> <template>
Scroll down to see the bottom-right button. Scrollez en bas de la page pour voir le bouton en bas à droite.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100"> <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div <div
style="{ style="{
...@@ -46,15 +46,15 @@ Display area is 40px \* 40px. ...@@ -46,15 +46,15 @@ Display area is 40px \* 40px.
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribut | Description | Type | Valeurs acceptées | Défaut |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- | | ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | the target to trigger scroll | string | | | | target | La cible pour déclencher le scroll | string | | |
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 | | visibility-height | Le bouton ne s'affichera pas tant que la hauteur de défilement n'aura pas atteint cette valeur. | number | | 200 |
| right | right distance | number | | 40 | | right | La distance du bord droit | number | | 40 |
| bottom | bottom distance | number | | 40 | | bottom | La distance du bord gauche | number | | 40 |
### Events ### Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- | | ---------- | ------------------- | ----------- |
| click | triggers when click | click event | | click | Se déclenche quand l'utilisateur clique | click event |
...@@ -5,7 +5,7 @@ Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement. ...@@ -5,7 +5,7 @@ Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.
### Usage ### 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 '/'. :::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 ```html
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
...@@ -41,4 +41,4 @@ Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement. ...@@ -41,4 +41,4 @@ Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.
| Attributs | Description | Type | Valeurs acceptées | Défaut| | Attributs | Description | Type | Valeurs acceptées | Défaut|
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| to | Route cible du lien, identique au `to` de `vue-router`. | string/object | — | — | | 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 | | replace | Si `true`, la navigation ne laissera pas d'historique. | boolean | — | false |
...@@ -8,7 +8,7 @@ Bouton communément utilisé. ...@@ -8,7 +8,7 @@ Bouton communément utilisé.
```html ```html
<el-row> <el-row>
<el-button>Default</el-button> <el-button>Défaut</el-button>
<el-button type="primary">Primary</el-button> <el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button> <el-button type="success">Success</el-button>
<el-button type="info">Info</el-button> <el-button type="info">Info</el-button>
...@@ -17,7 +17,7 @@ Bouton communément utilisé. ...@@ -17,7 +17,7 @@ Bouton communément utilisé.
</el-row> </el-row>
<el-row> <el-row>
<el-button plain>Plain</el-button> <el-button plain>Plein</el-button>
<el-button type="primary" plain>Primary</el-button> <el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button> <el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button> <el-button type="info" plain>Info</el-button>
...@@ -26,7 +26,7 @@ Bouton communément utilisé. ...@@ -26,7 +26,7 @@ Bouton communément utilisé.
</el-row> </el-row>
<el-row> <el-row>
<el-button round>Round</el-button> <el-button round>Arrondi</el-button>
<el-button type="primary" round>Primary</el-button> <el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button> <el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button> <el-button type="info" round>Info</el-button>
...@@ -85,7 +85,7 @@ Bouton sans bordure ni fond. ...@@ -85,7 +85,7 @@ Bouton sans bordure ni fond.
### Icône ### 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. Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser avec du texte.
:::demo Utilisez l'attribut `icon` pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise `<i>`. Des icônes personnalisées peuvent également être utilisées. :::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.
......
...@@ -4,7 +4,7 @@ Affiche un calendrier. ...@@ -4,7 +4,7 @@ Affiche un calendrier.
### Usage basique ### Usage basique
:::demo Réglez `value` pour spécifier le mois à afficher. Si `value` n'est pas sépcifié, le mois actuel sera affiché. `value` supporte le two-way binding. :::demo Réglez `value` pour spécifier le mois à afficher. Si `value` n'est pas spécifiée, le mois actuel sera affiché. `value` supporte le two-way binding.
```html ```html
<el-calendar v-model="value"> <el-calendar v-model="value">
</el-calendar> </el-calendar>
...@@ -23,7 +23,7 @@ Affiche un calendrier. ...@@ -23,7 +23,7 @@ Affiche un calendrier.
### Contenu personnalisé ### Contenu personnalisé
:::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). pour plus d'informations, référez-vous à la documentation ci-dessous. :::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.
```html ```html
<el-calendar> <el-calendar>
<!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax--> <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
......
...@@ -4,14 +4,14 @@ Conteneur intégrant des informations. ...@@ -4,14 +4,14 @@ Conteneur intégrant des informations.
### Usage ### Usage
Les composants Card incluent un titre, un contenu et des opérations. Le composant Card comprend un titre, un contenu et des opérations.
:::demo Card est composé d'un `header` et d'un `body`. `header` est optionnel et son contenu nécessite l'utilisation d'un slot. :::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 ```html
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>Card name</span> <span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operating button</el-button> <el-button style="float: right; padding: 3px 0" type="text">Bouton</el-button>
</div> </div>
<div v-for="o in 4" :key="o" class="text item"> <div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }} {{'List item ' + o }}
......
...@@ -4,7 +4,7 @@ Affiche en boucle une série d'images ou de textes dans un espace limité. ...@@ -4,7 +4,7 @@ Affiche en boucle une série d'images ou de textes dans un espace limité.
### Usage ### 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. :::demo Utilisez `el-carousel` avec `el-carousel-item`, et vous obtiendrez un carrousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise `el-carousel-item`. Par défaut le carrousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carrousel défilera uniquement quand vous cliquerez sur l'indicateur.
```html ```html
<template> <template>
<div class="block"> <div class="block">
...@@ -47,9 +47,9 @@ Affiche en boucle une série d'images ou de textes dans un espace limité. ...@@ -47,9 +47,9 @@ Affiche en boucle une série d'images ou de textes dans un espace limité.
### Indicateurs ### Indicateurs
Les indicateurs peuvent être affichés en dehors du carousel. Les indicateurs peuvent être affichés en dehors du carrousel.
:::demo L'attribut `indicator-position` détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carousel, régler `indicator-position` sur `outside` les affichera à l'extèrieur; régler `indicator-position` sur `none` les cachera totalement. :::demo L'attribut `indicator-position` détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carrousel, régler `indicator-position` sur `outside` les affichera à l'extérieur; régler `indicator-position` sur `none` les cachera totalement.
```html ```html
<template> <template>
<el-carousel indicator-position="outside"> <el-carousel indicator-position="outside">
...@@ -83,7 +83,7 @@ Les indicateurs peuvent être affichés en dehors du carousel. ...@@ -83,7 +83,7 @@ Les indicateurs peuvent être affichés en dehors du carousel.
Vous pouvez définir quand les flèches doivent apparaître. 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. :::demo L'attribut `arrow` détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carrousel. Réglez `arrow` sur `always` ou `never` affiche ou cache les flèches de manière permanente.
```html ```html
<template> <template>
<el-carousel :interval="5000" arrow="always"> <el-carousel :interval="5000" arrow="always">
...@@ -115,9 +115,9 @@ Vous pouvez définir quand les flèches doivent apparaître. ...@@ -115,9 +115,9 @@ Vous pouvez définir quand les flèches doivent apparaître.
### Mode carte ### Mode carte
Quand la page est suffisement large mais avec une hauteur limitée, vous pouvez activer le mode carte. Quand la page est suffisamment large mais avec une hauteur limitée, vous pouvez activer le mode carte.
:::demo Réglez `type` sur `card` pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carousel. :::demo Réglez `type` sur `card` pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carrousel.
```html ```html
<template> <template>
<el-carousel :interval="4000" type="card" height="200px"> <el-carousel :interval="4000" type="card" height="200px">
...@@ -147,7 +147,7 @@ Quand la page est suffisement large mais avec une hauteur limitée, vous pouvez ...@@ -147,7 +147,7 @@ Quand la page est suffisement large mais avec une hauteur limitée, vous pouvez
``` ```
::: :::
Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le défilement soit vertical em mettant `direction` à `vertical`. Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le défilement soit vertical en mettant `direction` à `vertical`.
:::demo :::demo
```html ```html
...@@ -167,11 +167,11 @@ Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le dé ...@@ -167,11 +167,11 @@ Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le dé
line-height: 200px; line-height: 200px;
margin: 0; margin: 0;
} }
.el-carousel__item:nth-child(2n) { .el-carousel__item:nth-child(2n) {
background-color: #99a9bf; background-color: #99a9bf;
} }
.el-carousel__item:nth-child(2n+1) { .el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6; background-color: #d3dce6;
} }
...@@ -179,33 +179,33 @@ Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le dé ...@@ -179,33 +179,33 @@ Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le dé
``` ```
::: :::
### Attributs du Carousel ### Attributs du Carrousel
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| height | Hauteur du carousel. | string | — | — | | height | Hauteur du carrousel. | string | — | — |
| initial-index | Index de la slide initiale (commence à 0). | number | — | 0 | | initial-index | Index de la slide initiale (commence à 0). | number | — | 0 |
| trigger | Comment les indicateurs sont déclenchés | string | hover/click | hover | | trigger | Comment les indicateurs sont déclenchés | string | hover/click | hover |
| autoplay | Si le carousel défile automatiquement | boolean | — | true | | autoplay | Si le carrousel défile automatiquement | boolean | — | true |
| interval | Intervalle pour le défilement automatique, en millisecondes. | number | — | 3000 | | interval | Intervalle pour le défilement automatique, en millisecondes. | number | — | 3000 |
| indicator-position | Position des indicateurs. | string | outside/none | — | | indicator-position | Position des indicateurs. | string | outside/none | — |
| arrow | Détermine quand les flèches sont affichés. | string | always/hover/never | hover | | arrow | Détermine quand les flèches sont affichées. | string | always/hover/never | hover |
| type | Type du carousel. | string | card | — | | type | Type du carrousel. | string | card | — |
| loop | Affiche les éléments en boucle. | boolean | - | true | | loop | Affiche les éléments en boucle. | boolean | - | true |
| direction | Détermine la direction du défilement. | string | horizontal/vertical | horizontal | | direction | Détermine la direction du défilement. | string | horizontal/vertical | horizontal |
### Évènements du Carousel ### Évènements du Carrousel
| Nom | Description | Paramètres | | Nom | Description | Paramètres |
|---------|---------|---------| |---------|---------|---------|
| change | Se déclenche quand la slide active défile. | Index de la nouvelle slide, index de l'ancienne slide | | change | Se déclenche quand la slide active défile. | Index de la nouvelle slide, index de l'ancienne slide |
### Méthodes du Carousel ### Méthodes du Carrousel
| Mathode | Description | Paramètres | | 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| | 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. | — | | prev | Défile vers la slide précédente. | — |
| next | Défile vers la slide suivante. | — | | next | Défile vers la slide suivante. | — |
### Attributs du Carousel-Item ### Attributs du Carrousel-Item
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | Nom de l'item, peut être utilisé dans `setActiveItem`. | string | — | — | | name | Nom de l'item, peut être utilisé dans `setActiveItem`. | string | — | — |
......
This diff is collapsed.
...@@ -51,9 +51,9 @@ La checkbox peut être désactivée. ...@@ -51,9 +51,9 @@ La checkbox peut être désactivée.
### Checkbox groupées ### Checkbox groupées
Utile pour grouper des checkbox, indiquant si une option est selectionnée en vérifiant la case en question. Utile pour grouper des checkbox, indiquant si une option est sélectionnée en vérifiant la case en question.
:::demo L'élément `checkbox-group` peut gérer plusieurs checkbox d'un groupe en utilisant `v-model`, qui sera un `Array`. Dans l'élément `el-checkbox`, `label` est la valeur de la checkbox. 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. :::demo L'élément `checkbox-group` peut gérer plusieurs checkbox d'un groupe en utilisant `v-model`, qui sera un `Array`. Dans l'élément `el-checkbox`, `label` est la valeur de la checkbox. S'il n'y a aucun contenu dans la balise, `label` sera également la description de la checkbox. `label` correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.
```html ```html
<template> <template>
...@@ -80,13 +80,13 @@ Utile pour grouper des checkbox, indiquant si une option est selectionnée en v ...@@ -80,13 +80,13 @@ Utile pour grouper des checkbox, indiquant si une option est selectionnée en v
### Indéterminée ### Indéterminée
La propriété `indeterminate` permet de réaliser un effet "Selectionner tout". La propriété `indeterminate` permet de réaliser un effet "Sélectionner tout".
:::demo :::demo
```html ```html
<template> <template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Selectionner tout</el-checkbox> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Sélectionner tout</el-checkbox>
<div style="margin: 15px 0;"></div> <div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
...@@ -244,7 +244,7 @@ Des checkbox avec une apparence de bouton. ...@@ -244,7 +244,7 @@ Des checkbox avec une apparence de bouton.
| value / v-model | La valeur liée. | string / number / boolean | — | — | | 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 | — | — | | 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 | — | — | | true-label | Valeur de la checkbox si cochée. | string / number | — | — |
| false-label | Valeur de la checkbox si non-cochée. | string / number | — | — | | false-label | Valeur de la checkbox si non cochée. | string / number | — | — |
| disabled | Désactive la checkbox. | boolean | — | false | | disabled | Désactive la checkbox. | boolean | — | false |
| border | Ajoute une bordure à 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 | — | | size | taille de la checkbox, ne marche que si `border` est 'true' | string | medium / small / mini | — |
...@@ -278,7 +278,7 @@ Des checkbox avec une apparence de bouton. ...@@ -278,7 +278,7 @@ Des checkbox avec une apparence de bouton.
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | Valeur de la checkbox quand utilisée dans un `checkbox-group` | 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 | — | — | | true-label | Valeur de la checkbox si cochée. | string / number | — | — |
| false-label | Valeur de la checkbox si non-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 | | disabled | Si la checkbox est désactivée. | boolean | — | false |
| name | Attribut 'name' natif. | string | — | — | | name | Attribut 'name' natif. | string | — | — |
| checked | SI la checkbox est cochée. | boolean | — | false | | checked | Si la checkbox est cochée. | boolean | — | false |
...@@ -14,11 +14,11 @@ Vous pouvez agrandir plusieurs panneaux. ...@@ -14,11 +14,11 @@ Vous pouvez agrandir plusieurs panneaux.
<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> <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>
<el-collapse-item title="Feedback" name="2"> <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 d'expérience: permets aux utilisateurs de percevoir clairement leurs opérations par le biais d'animations et d'effets interactifs.</div>
<div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div> <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>
<el-collapse-item title="Efficacité" name="3"> <el-collapse-item title="Efficacité" name="3">
<div>Simplifier le processus: garde chaque operation simple et intuitive.;</div> <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
<div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div> <div>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> <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>
...@@ -60,7 +60,7 @@ En mode accordéon, un seul panneau peut être ouvert à la fois. ...@@ -60,7 +60,7 @@ En mode accordéon, un seul panneau peut être ouvert à la fois.
<div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</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>
<el-collapse-item title="Efficacité" name="3"> <el-collapse-item title="Efficacité" name="3">
<div>Simplifier le processus: garde chaque operation simple et intuitive.;</div> <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
<div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div> <div>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> <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>
...@@ -83,7 +83,7 @@ En mode accordéon, un seul panneau peut être ouvert à la fois. ...@@ -83,7 +83,7 @@ En mode accordéon, un seul panneau peut être ouvert à la fois.
### Titre personnalisé ### 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. En plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titres de panneau, ce qui rend possible l'ajout de contenu personnalisé, comme des icônes par exemple.
:::demo :::demo
```html ```html
...@@ -100,7 +100,7 @@ En plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titre ...@@ -100,7 +100,7 @@ En plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titre
<div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</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>
<el-collapse-item title="Efficacité" name="3"> <el-collapse-item title="Efficacité" name="3">
<div>Simplifier le processus: garde chaque operation simple et intuitive.;</div> <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
<div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div> <div>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> <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>
......
## Container ## Container
Les composants Container servent à structurer la page: 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-container>`: Conteneur de wrapping. Quand il est placé à l'intérieur de `<el-header>` ou `<el-footer>`, tous les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.
`<el-header>`: Conteneur pour headers. `<el-header>`: Conteneur pour headers.
`<el-aside>`: Conteneur pour section latérale (en général un menu). `<el-aside>`: Conteneur pour section latérale (en général un menu).
`<el-main>`: Conteneur pour le contenu principal. `<el-main>`: Conteneur pour la section principal.
`<el-footer>`: Conteneur pour footers. `<el-footer>`: Conteneur pour footers.
:::tip :::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>`. Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `<el-container>` doivent être un des quatre éléments précédents, leur élément père devant obligatoirement être `<el-container>`.
::: :::
### Mises en page habituelles ### Mises en page habituelles
......
## Thème ## Thème
Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons four méthodes pour changer les variables de style. Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.
### Online Theme Roller ### Online Theme Roller
Use [Online Theme Roller](./#/fr-FR/theme) to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section). Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' ou 'Importer un thème de composant à la demande' de cette section).
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;"> <img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
......
## DatePicker ## DatePicker
Utilisez le DatePicker pour les champs de dates. Utilisez DatePicker pour les champs de dates.
### Entrez la date ### Entrez la date
L'unité de base du DatePicker est le jour. 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. :::demo L'unité est déterminée par l'attribut `type`. Vous pouvez ajouter des options en créant un objet `picker-options` avec la propriété `shortcuts`. L'état désactivé est contrôlé par `disabledDate` qui est une fonction.
```html ```html
<template> <template>
...@@ -148,7 +148,7 @@ Vous pouvez sélectionner une plage de dates. ...@@ -148,7 +148,7 @@ Vous pouvez sélectionner une plage de dates.
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
<span class="demonstration">Avec raccourcis</span> <span class="demonstration">Avec des options</span>
<el-date-picker <el-date-picker
v-model="value2" v-model="value2"
type="daterange" type="daterange"
...@@ -203,33 +203,33 @@ Vous pouvez sélectionner une plage de dates. ...@@ -203,33 +203,33 @@ Vous pouvez sélectionner une plage de dates.
::: :::
### Month Range ### Plage de mois
Picking a month range is supported. Vous pouvez sélectionner une plage de mois.
:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute. :::demo Lorsque ce mode est activé, les panneaux gauche et droit sont liés par défaut. Si vous voulez que les deux panneaux switch indépendamment les années en cours, vous pouvez utiliser l'attribut `unlink-panels`.
```html ```html
<template> <template>
<div class="block"> <div class="block">
<span class="demonstration">Default</span> <span class="demonstration">Défaut</span>
<el-date-picker <el-date-picker
v-model="value1" v-model="value1"
type="monthrange" type="monthrange"
range-separator="To" range-separator="à"
start-placeholder="Start month" start-placeholder="Mois de début"
end-placeholder="End month"> end-placeholder="Mois de fin">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
<span class="demonstration">With quick options</span> <span class="demonstration">Avec options</span>
<el-date-picker <el-date-picker
v-model="value2" v-model="value2"
type="monthrange" type="monthrange"
align="right" align="right"
unlink-panels unlink-panels
range-separator="To" range-separator="à"
start-placeholder="Start month" start-placeholder="Mois de début"
end-placeholder="End month" end-placeholder="Mois de fin"
:picker-options="pickerOptions"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -241,19 +241,19 @@ Picking a month range is supported. ...@@ -241,19 +241,19 @@ Picking a month range is supported.
return { return {
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'This month', text: 'Ce mois',
onClick(picker) { onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]); picker.$emit('pick', [new Date(), new Date()]);
} }
}, { }, {
text: 'This year', text: 'Cette année',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(new Date().getFullYear(), 0); const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}, { }, {
text: 'Last 6 months', text: 'Les derniers 6 mois',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
...@@ -347,7 +347,7 @@ Attention à la capitalisation ! ...@@ -347,7 +347,7 @@ Attention à la capitalisation !
| `A` | AM/PM | uniquement pour `format`, majuscules | AM | | `A` | AM/PM | uniquement pour `format`, majuscules | AM |
| `a` | am/pm | uniquement pour `format`, minuscules | am | | `a` | am/pm | uniquement pour `format`, minuscules | am |
| `timestamp` | timestamp JS | uniquement pour `value-format`; la variable stockée sera un `number` | 1483326245000 | | `timestamp` | timestamp JS | uniquement pour `value-format`; la variable stockée sera un `number` | 1483326245000 |
| `[MM]` | No escape characters | To escape characters, wrap them in square brackets (e.g. [A] [MM]) | MM | | `[MM]` | Pas de caractère d'échappement | Pour échapper des caractères, placez-les entre crochets (ex: [A] [MM]) | MM |
:::demo :::demo
```html ```html
...@@ -449,9 +449,9 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d ...@@ -449,9 +449,9 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
| popper-class | Nom de classe pour le menu déroulant du DatePicker. | string | — | — | | popper-class | Nom de classe pour le menu déroulant du DatePicker. | string | — | — |
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} | | picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
| range-separator | Séparateur de plage de dates. | string | — | '-' | | 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-value | Date par défaut du calendrier, optionnelle. | Date | Tout ce qui est accepté par `new Date()` | — |
| default-time | Horaire par défaut quand on sélectionne une plage dates, optionnel. | string[] | Tableau de taille 2, chaque valeur est au format `12:00:00`. La première pour la date de début, la deuxième pour la date de fin. | — | | 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) | — | | value-format | Format de la variable stockée, optionnel. Si non spécifié, la valeur sera un objet Date. | string | Voir [formats de date](#/en-US/component/date-picker#formats-de-date) | — |
| name | Identique au `name` de l'input natif | string | — | — | | name | Identique au `name` de l'input natif | string | — | — |
| unlink-panels | Rend indépendants les deux panneaux de plage de dates. | boolean | — | false | | 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 | | prefix-icon | Icône de préfixe. | string | — | el-icon-date |
...@@ -461,10 +461,10 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d ...@@ -461,10 +461,10 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
### Options du Picker ### Options du Picker
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | UN tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — | | 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 | — | — | | disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 | | 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 }) | - | - | | onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |
### Raccourcis ### Raccourcis
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
......
## DateTimePicker ## DateTimePicker
Selectionnez une date et un heure dans un seul picker. Sélectionnez une date et une heure dans un seul picker.
:::tip :::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. 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.
...@@ -46,19 +46,19 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information ...@@ -46,19 +46,19 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
return { return {
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Today', text: 'Aujourdh\'ui',
onClick(picker) { onClick(picker) {
picker.$emit('pick', new Date()); picker.$emit('pick', new Date());
} }
}, { }, {
text: 'Yesterday', text: 'Hier',
onClick(picker) { onClick(picker) {
const date = new Date(); const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24); date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date); picker.$emit('pick', date);
} }
}, { }, {
text: 'A week ago', text: 'Il y a une semaine',
onClick(picker) { onClick(picker) {
const date = new Date(); const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
...@@ -112,7 +112,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information ...@@ -112,7 +112,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
return { return {
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Last week', text: 'La semaine passée',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
...@@ -120,7 +120,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information ...@@ -120,7 +120,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}, { }, {
text: 'Last month', text: 'Le mois dernier',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
...@@ -128,7 +128,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information ...@@ -128,7 +128,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}, { }, {
text: 'Last 3 months', text: 'Les 2 derniers mois',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
...@@ -207,8 +207,8 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information ...@@ -207,8 +207,8 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} | | picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
| range-separator | Séparateur de plage. | string | - | '-' | | 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-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é. | — | | 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) | — | | 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 | — | — | | name | Identique au `name` de l'input natif | string | — | — |
| unlink-panels | Rend indépendants les deux panneaux de plage de dates | boolean | — | false | | 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 | | prefix-icon | Icône de préfixe. | string | — | el-icon-date |
...@@ -217,9 +217,9 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information ...@@ -217,9 +217,9 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
### Options du Picker ### Options du Picker
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — | | shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — | | disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 | | firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |
### Raccourcis ### Raccourcis
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
......
...@@ -45,7 +45,7 @@ Le Dialog ouvre un modal personnalisable. ...@@ -45,7 +45,7 @@ Le Dialog ouvre un modal personnalisable.
::: :::
:::tip :::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. `before-close` ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. S'il y a des boutons dans le `footer`, vous pouvez configurer `before-close` grâce à leur évènement click.
::: :::
### Personalisation ### Personalisation
...@@ -56,7 +56,7 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris. ...@@ -56,7 +56,7 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
```html ```html
<!-- Table --> <!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">Ouvir un modal avec tableau</el-button> <el-button type="text" @click="dialogTableVisible = true">Ouvrir un modal avec tableau</el-button>
<el-dialog title="Adresse d'expédition" :visible.sync="dialogTableVisible"> <el-dialog title="Adresse d'expédition" :visible.sync="dialogTableVisible">
<el-table :data="gridData"> <el-table :data="gridData">
...@@ -132,7 +132,7 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris. ...@@ -132,7 +132,7 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
Si un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis. 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. :::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 ```html
<template> <template>
<el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button> <el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>
...@@ -202,7 +202,7 @@ Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot pa ...@@ -202,7 +202,7 @@ Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot pa
::: :::
:::tip :::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. Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync` ne peut pas fonctionner. Dans ce cas retirez-le, écoutez les évènements `open` et `close`, et commitez les mutations Vuex pour mettre à jour la valeur de cette variable.
::: :::
### Attributs ### Attributs
...@@ -215,8 +215,8 @@ Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync` ...@@ -215,8 +215,8 @@ Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync`
| fullscreen | Si le Dialog doit être en plein écran. | boolean | — | false | | fullscreen | Si le Dialog doit être en plein écran. | boolean | — | false |
| top | Valeur du `margin-top` du CSS du Dialog. | string | — | 15vh | | top | Valeur du `margin-top` du CSS du Dialog. | string | — | 15vh |
| modal | Si un masque est affiché. | boolean | — | true | | 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 | | modal-append-to-body | S'il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean | — | true |
| append-to-body | Si il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean | — | false | | append-to-body | S'il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean | — | false |
| lock-scroll | Si le défilement du body est désactivé. | boolean | — | true | | lock-scroll | Si le défilement du body est désactivé. | boolean | — | true |
| custom-class | Nom de classe pour le Dialog | string | — | — | | 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-click-modal | Si le Dialog peut être fermé en cliquant sur le masque. | boolean | — | true |
......
...@@ -10,9 +10,9 @@ Séparer le texte de deux paragraphes. ...@@ -10,9 +10,9 @@ Séparer le texte de deux paragraphes.
```html ```html
<template> <template>
<div> <div>
<span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span> <span>Je suis assis à ma fenêtre ce matin où le monde, tel un passant, s’arrête un instant, me fait signe de la tête et part.</span>
<el-divider></el-divider> <el-divider></el-divider>
<span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span> <span>Les petites pensées sont le bruissement des feuilles; ils ont leur murmure de joie dans mon esprit.</span>
</div> </div>
</template> </template>
``` ```
...@@ -20,17 +20,17 @@ Séparer le texte de deux paragraphes. ...@@ -20,17 +20,17 @@ Séparer le texte de deux paragraphes.
### Contenu personnalisé ### Contenu personnalisé
Vous ajouter du contenu dans la ligne. Vous ajouter du contenu dans la ligne de séparation.
:::demo :::demo
```html ```html
<template> <template>
<div> <div>
<span>What you are you do not see, what you see is your shadow. </span> <span>Vous ne voyez pas ce que vous êtes, ce que vous voyez est votre ombre.</span>
<el-divider content-position="left">Rabindranath Tagore</el-divider> <el-divider content-position="left">Rabindranath Tagore</el-divider>
<span>I cannot choose the best. The best chooses me.</span> <span>Je ne peux pas choisir le meilleur. Le meilleur me choisit.</span>
<el-divider><i class="el-icon-star-on"></i></el-divider> <el-divider><i class="el-icon-star-on"></i></el-divider>
<span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span> <span>Mes souhaits sont des imbéciles, ils crient à travers ta chanson, mon Maître. Laisse-moi mais écoute.</span>
<el-divider content-position="right">Rabindranath Tagore</el-divider> <el-divider content-position="right">Rabindranath Tagore</el-divider>
</div> </div>
</template> </template>
...@@ -57,5 +57,5 @@ Vous ajouter du contenu dans la ligne. ...@@ -57,5 +57,5 @@ Vous ajouter du contenu dans la ligne.
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| direction | Régle la direction du séparateur. | string | horizontal / vertical | horizontal | | direction | Règle la direction du séparateur. | string | horizontal / vertical | horizontal |
| content-position | Personnalise le contenu du séparateur. | String | left / right / center | center | | content-position | Personnalise le contenu du séparateur. | String | left / right / center | center |
\ No newline at end of file
...@@ -301,7 +301,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai ...@@ -301,7 +301,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
| Attribut | Description | Type | Valeurs acceptées | Défaut | | 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 | — | — | | command | Le contenu à envoyer au callback de l'évènement `command` du Dropdown. | string/number/object | — | — |
| disabled | Si l'élément est désactivé. | boolean | — | false | | disabled | Si l'élément est désactivé. | boolean | — | false |
| divided | Si un diviseur doit être affiché. | boolean | — | false | | divided | Si un diviseur doit être affiché. | boolean | — | false |
| icon | Classe de l'icône. | string | — | — | | icon | Classe de l'icône. | string | — | — |
This diff is collapsed.
...@@ -12,7 +12,7 @@ Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i> ...@@ -12,7 +12,7 @@ Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
<i class="el-icon-share"></i> <i class="el-icon-share"></i>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">Search</el-button> <el-button type="primary" icon="el-icon-search">Chercher</el-button>
``` ```
::: :::
......
## InfiniteScroll ## InfiniteScroll
Load more data while reach bottom of the page Charge plus de données quand le bas de la page est atteint
### Basic usage ### Utilisation de base
Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom. Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la méthode de chargement lors du défilement vers le bas.
:::demo :::demo
```html ```html
<template> <template>
...@@ -29,7 +29,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when ...@@ -29,7 +29,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
``` ```
::: :::
### Disable Loading ### Désactiver le chargement
:::demo :::demo
```html ```html
...@@ -42,7 +42,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when ...@@ -42,7 +42,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
<li v-for="i in count" class="list-item">{{ i }}</li> <li v-for="i in count" class="list-item">{{ i }}</li>
</ul> </ul>
<p v-if="loading">Loading...</p> <p v-if="loading">Loading...</p>
<p v-if="noMore">No more</p> <p v-if="noMore">Pas plus</p>
</div> </div>
</template> </template>
...@@ -77,11 +77,11 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when ...@@ -77,11 +77,11 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
::: :::
### Attributes ### Attributs
| Attribute | Description | Type | Accepted values | Default | | Attribut | Description | Type | Valeur acceptées | Défaut |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- | | -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| infinite-scroll-disabled | is disabled | boolean | - |false | | infinite-scroll-disabled | Est désactivé | boolean | - |false |
| infinite-scroll-delay | throttle delay (ms) | number | - |200 | | infinite-scroll-delay | Throttle le delais (ms) | number | - |200 |
| infinite-scroll-distance| trigger distance (px) | number |- |0 | | infinite-scroll-distance| Distance de déclenchement (px) | number |- |0 |
| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true | | infinite-scroll-immediate | S'il faut exécuter la méthode de chargement immédiatement, au cas où le contenu ne pourrait pas être set à l'état initial. | boolean | - |true |
...@@ -4,7 +4,7 @@ Un champ d'input de valeurs numériques, avec un domaine personnalisable. ...@@ -4,7 +4,7 @@ Un champ d'input de valeurs numériques, avec un domaine personnalisable.
### Usage ### Usage
:::demo Liez une variable à `v-model` dans l'element `<el-input-number>` et c'est tout ! :::demo Liez une variable à `v-model` dans l'élément `<el-input-number>` et c'est tout !
```html ```html
<template> <template>
...@@ -111,7 +111,7 @@ Vous pouvez déterminer un pas pour le champs. ...@@ -111,7 +111,7 @@ Vous pouvez déterminer un pas pour le champs.
::: :::
:::tip :::tip
La valeur de `precision` doit être un integer non-négatif et ne doit pas être inférieure aux décimales de `step`. La valeur de `precision` doit être un integer non négatif et ne doit pas être inférieure aux décimales de `step`.
::: :::
### Taille ### Taille
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
Le champ d'input de base. Le champ d'input de base.
:::warning :::warning
Input est un composant controllé, il **affiche toujours la valeur liée de Vue**. Input est un composant contrôlé, il **affiche toujours la valeur liée de Vue**.
En règle générale, l'évènement `input` devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez `v-model`). Dans le cas contraire, la valeur du champ ne sera pas modifiée. En règle générale, l'évènement `input` devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez `v-model`). Dans le cas contraire, la valeur du champ ne sera pas modifiée.
......
...@@ -48,7 +48,7 @@ Lien souligné. ...@@ -48,7 +48,7 @@ Lien souligné.
```html ```html
<div> <div>
<el-link :underline="false">Non-souligné</el-link> <el-link :underline="false">non souligné</el-link>
<el-link>Souligné</el-link> <el-link>Souligné</el-link>
</div> </div>
``` ```
......
...@@ -288,7 +288,7 @@ Le menu vertical peut être réduit. ...@@ -288,7 +288,7 @@ Le menu vertical peut être réduit.
| show-timeout | Délai avant de montrer un sous-menu. | number | — | 300 | | show-timeout | Délai avant de montrer un sous-menu. | number | — | 300 |
| hide-timeout | Délai avant de cacher 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 | | 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 | | popper-append-to-body | S'il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété. | boolean | - | Sous-menus de niveau 1: true / autres sous-menus: false |
### Attributs des items du menu ### Attributs des items du menu
......
...@@ -41,7 +41,7 @@ Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme. ...@@ -41,7 +41,7 @@ Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.
Confirm est utilisé pour demander une confirmation à l'utilisateur. 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. :::demo Appelez la méthode `$confirm` pour ouvrir une confirm, qui simule le `confirm` système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut `options`. L'attribut `type` indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut `title` doit être de type `string`. S'il se trouve être un `object`, il sera considéré comme étant l'attribut `options`. Cet exemple utilise une `Promise` pour gérer la suite du processus.
```html ```html
<template> <template>
...@@ -213,7 +213,7 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe ...@@ -213,7 +213,7 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe
export default { export default {
methods: { methods: {
open() { open() {
this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', { this.$confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {
distinguishCancelAndClose: true, distinguishCancelAndClose: true,
confirmButtonText: 'Enregistrer', confirmButtonText: 'Enregistrer',
cancelButtonText: 'Ne pas enregistrer' cancelButtonText: 'Ne pas enregistrer'
...@@ -308,7 +308,7 @@ Les méthodes correspondantes sont: `MessageBox`, `MessageBox.alert`, `MessageBo ...@@ -308,7 +308,7 @@ Les méthodes correspondantes sont: `MessageBox`, `MessageBox.alert`, `MessageBo
| 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. | — | — | | 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 | | 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. | — | — | | 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 | | distinguishCancelAndClose | S'il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox. | boolean | — | false |
| lockScroll | Si le défilement de la page doit être bloqué lorsque la MessageBox est active. | boolean | — | true | | 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). | | 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 | | showConfirmButton | Si le bouton confirmer doit être affiché. | boolean | — | true |
......
## Message ## 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. 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 ### Usage
......
...@@ -4,7 +4,7 @@ Affiche une notification globale dans un coin de la page. ...@@ -4,7 +4,7 @@ Affiche une notification globale dans un coin de la page.
### Usage ### 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. :::demo Element enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configurer les champs `title` et` message`. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec `duration`. Si la durée est mise à `0`, la notification ne se fermera pas. `duration` prends donc un `Number` en millisecondes.
```html ```html
<template> <template>
...@@ -47,7 +47,7 @@ Affiche une notification globale dans un coin de la page. ...@@ -47,7 +47,7 @@ Affiche une notification globale dans un coin de la page.
### Types ### Types
We provide four types: success, warning, info and error. Nous fournissons quatre types: succès, avertissement, information et erreur.
:::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes enregistrées pour chaque type, comme dans `open3` et `open4`, qui ne nécessitent donc pas le champs `type`. :::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes enregistrées pour chaque type, comme dans `open3` et `open4`, qui ne nécessitent donc pas le champs `type`.
```html ```html
......
## PageHeader ## PageHeader
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb. Si le chemin de la page est simple, il est recommandé d’utiliser PageHeader au lieu de Breadcrumb.
### Basic ### Basic
...@@ -22,18 +22,18 @@ If path of the page is simple, it is recommended to use PageHeader instead of th ...@@ -22,18 +22,18 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
::: :::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |------------------------------ | ------ | |---------- |-------------- |---------- |------------------------------ | ------ |
| title | main title | string | — | Back | | title | titre principal | string | — | Back |
| content | content | string | — | — | | content | contenu | string | — | — |
### Events ### Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |
|----------- |-------------- |----------- | |----------- |-------------- |----------- |
| back | triggers when right side is clicked | — | | back | se déclenche lorsque vous cliquez sur le côté droit | — |
### Slots ### Slots
| slot | Description | | slot | Description |
|---------- | ---------------------- | |---------- | ---------------------- |
| title | title content | | title | contenu du titre |
| content | content | | content | contenu |
...@@ -144,7 +144,7 @@ Vous pouvez ajouter plus de modules suivant vos besoins. ...@@ -144,7 +144,7 @@ Vous pouvez ajouter plus de modules suivant vos besoins.
``` ```
::: :::
### Cacher la pagination si il n'y a qu'une seule page ### Cacher la pagination s'il n'y a qu'une seule page
Lorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec l'attribut `hide-on-single-page`. Lorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec l'attribut `hide-on-single-page`.
......
...@@ -37,9 +37,9 @@ Dans ce cas le pourcentage ne prends pas de place en plus. ...@@ -37,9 +37,9 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
``` ```
::: :::
### Custom color ### Couleur personnalisée
You can use `color` attr to set the progress bar color. it accepts color string, function, or array. Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de progression. il accepte une couleur, une fonction ou un tableau.
:::demo :::demo
...@@ -111,9 +111,9 @@ You can use `color` attr to set the progress bar color. it accepts color string, ...@@ -111,9 +111,9 @@ You can use `color` attr to set the progress bar color. it accepts color string,
``` ```
::: :::
### Dashboard progress bar ### Barre de progression du tableau de bord
You also can specify `type` attribute to `dashboard` to use dashboard progress bar. Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser la barre de progression du tableau de bord.
:::demo :::demo
......
...@@ -62,7 +62,7 @@ Vous pouvez ajouter du texte à chaque score. ...@@ -62,7 +62,7 @@ Vous pouvez ajouter du texte à chaque score.
Vous pouvez utiliser différentes icônes pour chaque Vous pouvez utiliser différentes icônes pour chaque
:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir l'icône des valeurs non-sélectionnées. :::demo Vous pouvez personnaliser les icônes en passant à `icon-classes` un tableau avec trois éléments ou un objet dont la clé est le seuil entre deux niveaux et la valeur la classe d'icônes correspondante. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir d'autres valeurs non sélectionnées.
```html ```html
<el-rate <el-rate
...@@ -123,11 +123,11 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées. ...@@ -123,11 +123,11 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
| low-threshold | Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas. | number | — | 2 | | 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 | | high-threshold | Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. | number | — | 4 |
| colors | colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | | colors | colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | Couleur des icônes non-sélectionnées. | string | — | #C6D1DE | | 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 | | disabled-void-color | Couleur des icônes non sélectionnées en lecture seule. | string | — | #EFF2F7 |
| icon-classes | Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] | | icon-classes | Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | Classe des icônes non-sélectionnées. | string | — | el-icon-star-off | | 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 | | 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-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 | | show-score | Si le score doit apparaître. Incompatible avec show-text. | boolean | — | false |
| text-color | Couleur du texte. | string | — | #1F2D3D | | text-color | Couleur du texte. | string | — | #1F2D3D |
......
...@@ -552,10 +552,10 @@ Si la valeur de Select est un objet, assurez-vous d'utiliser `value-key` comme i ...@@ -552,10 +552,10 @@ Si la valeur de Select est un objet, assurez-vous d'utiliser `value-key` comme i
| no-match-text | Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No matching data | | no-match-text | Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No matching data |
| no-data-text | Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No data | | no-data-text | Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No data |
| popper-class | Classe du menu déroulant. | string | — | — | | 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 | | reserve-keyword | Quand `multiple` et `filter` sont activés, s'il faut réserver le mot-clé courant après la sélection d'une option. | boolean | — | false |
| default-first-option | Sélectionne la première option avec Entrée. Utilisable avec `filterable` ou `remote` | boolean | - | false | | 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 | | 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 | | 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 ### Évènements de Select
......
...@@ -230,7 +230,7 @@ Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique ...@@ -230,7 +230,7 @@ Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique
| label | Label pour les lecteurs d'écran. | 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 | | debounce | Délai après écriture en millisecondes, marche quand `show-input` est `true`. | number | — | 300 |
| tooltip-class | Classe du tooltip. | string | — | — | | tooltip-class | Classe du tooltip. | string | — | — |
| marks | Marqueurs les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object | — | — | | marks | Marqueurs, les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object | — | — |
## Évènements ## Évènements
......
...@@ -62,7 +62,7 @@ Un tableau de base pour afficher seulement. ...@@ -62,7 +62,7 @@ Un tableau de base pour afficher seulement.
Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement. Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.
:::demo L'attribut `stripe` accepte un `Boolean`. Si `true`, le tabelau sera rayé. :::demo L'attribut `stripe` accepte un `Boolean`. Si `true`, le tableau sera rayé.
```html ```html
<template> <template>
<el-table <el-table
...@@ -833,7 +833,7 @@ Vous pouvez activer la sélection d'une ligne. ...@@ -833,7 +833,7 @@ Vous pouvez activer la sélection d'une ligne.
Vous pouvez aussi sélectionner plusieurs lignes. Vous pouvez aussi sélectionner plusieurs lignes.
:::demo Ajoutez une `el-table-column` avec son `type` à `selection`. Cet exemple utilise aussi `show-overflow-tooltip`: par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez `show-overflow-tooltip`, qui accepte un `Boolean`. Si `true`, le contenu non-affiché s'affichera dans le tooltip lorsque la souris passera sur la case. :::demo Ajoutez une `el-table-column` avec son `type` à `selection`. Cet exemple utilise aussi `show-overflow-tooltip`: par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez `show-overflow-tooltip`, qui accepte un `Boolean`. Si `true`, le contenu non affiché s'affichera dans le tooltip lorsque la souris passera sur la case.
```html ```html
<template> <template>
<el-table <el-table
...@@ -1889,7 +1889,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`. ...@@ -1889,7 +1889,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
| Nom | Description | | Nom | Description |
|------|--------| |------|--------|
| append | Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme si il y en a une. | | append | Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme s'il y en a une. |
### Attributs de Table-column ### Attributs de Table-column
......
...@@ -68,7 +68,7 @@ Les onglets peuvent être stylisés comme des cartes. ...@@ -68,7 +68,7 @@ Les onglets peuvent être stylisés comme des cartes.
### Style carte avec bordure ### Style carte avec bordure
ONglets avec style de carte et bordure. Onglets avec style de carte et bordure.
:::demo Mettez `type` à `border-card`. :::demo Mettez `type` à `border-card`.
......
...@@ -141,9 +141,9 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan ...@@ -141,9 +141,9 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
### Theme ### Theme
Tag provide three different themes: `dark``light` and `plain` Les balises utilisent trois thèmes différents: `dark`, `light` et `plain`
:::demo Using `effect` to change, default is `light` :::demo Utilisez `effect` pour changer. La valeur par défaut est `light`
```html ```html
<div class="tag-group"> <div class="tag-group">
<span class="tag-group__title">Dark</span> <span class="tag-group__title">Dark</span>
......
...@@ -70,7 +70,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire. ...@@ -70,7 +70,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
### Intervalle de temps fixe ### 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. Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés s'ils ont lieu avant l'horaire de début.
:::demo :::demo
```html ```html
...@@ -166,7 +166,7 @@ Vous pouvez également définir un intervalle libre. ...@@ -166,7 +166,7 @@ Vous pouvez également définir un intervalle libre.
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} | | picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
| range-separator | Séparateur d'intervalle. | string | - | '-' | | 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. | — | | 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) | — | | 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 | — | — | | name | Attribut `name` natif de l'input. | string | — | — |
| prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time | | 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 | | clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
......
...@@ -85,7 +85,7 @@ Vous pouvez filtrer les options. ...@@ -85,7 +85,7 @@ Vous pouvez filtrer les options.
Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer. 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. :::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 ```html
<template> <template>
<p style="text-align: center; margin: 0 0 20px">Utilise render-content</p> <p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>
...@@ -223,7 +223,7 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos ...@@ -223,7 +223,7 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
| filterable | Si Transfer est filtrable. | boolean | — | false | | filterable | Si Transfer est filtrable. | boolean | — | false |
| filter-placeholder | Placeholder du champ de filtrage. | string | — | Enter keyword | | filter-placeholder | Placeholder du champ de filtrage. | string | — | Enter keyword |
| filter-method | Méthode de filtrage. | function | — | — | | 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 | | target-order | Ordre de tri des éléments de la liste d'arrivée. S'il est à `original`, les éléments garderont le même ordre que la liste d'origine. Si à `push`, les nouveaux éléments seront mis à la suite des anciens. Si mis à `unshift`, les nouveaux éléments seront mis en haut de la liste. | string | original / push / unshift | original |
| titles | Titres des listes. | array | — | ['List 1', 'List 2'] | | titles | Titres des listes. | array | — | ['List 1', 'List 2'] |
| button-texts | Textes des boutons. | array | — | [ ] | | button-texts | Textes des boutons. | array | — | [ ] |
| render-content | Fonction de rendu pour les objets. | function(h, option) | — | — | | render-content | Fonction de rendu pour les objets. | function(h, option) | — | — |
......
...@@ -69,7 +69,7 @@ Voici la structure basique. ...@@ -69,7 +69,7 @@ Voici la structure basique.
Vous pouvez activer la sélection des noeuds. Vous pouvez activer la sélection des noeuds.
:::demo cate exemple montre également comment charger des données de manière asynchrone. :::demo cet exemple montre également comment charger des données de manière asynchrone.
```html ```html
<el-tree <el-tree
:props="props" :props="props"
...@@ -135,7 +135,7 @@ Vous pouvez activer la sélection des noeuds. ...@@ -135,7 +135,7 @@ Vous pouvez activer la sélection des noeuds.
### Noeud-feuille personnalisés en mode lazy ### Noeud-feuille personnalisés en mode lazy
:::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu. :::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.
```html ```html
<el-tree <el-tree
:props="props" :props="props"
...@@ -818,7 +818,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab ...@@ -818,7 +818,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
### props ### props
| Attribut | Description | Type | Accepted Values | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
| --------- | ---------------------------------------- | ------ | --------------- | ------- | | --------- | ---------------------------------------- | ------ | --------------- | ------- |
| label | Détermine quelle clé de l'objet noeud représente le label. | string, function(data, node) | — | — | | label | Détermine quelle clé de l'objet noeud représente le label. | string, function(data, node) | — | — |
| children | Détermine quelle clé de l'objet noeud représente les noeuds enfants. | string | — | — | | children | Détermine quelle clé de l'objet noeud représente les noeuds enfants. | string | — | — |
......
...@@ -344,14 +344,14 @@ Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié. ...@@ -344,14 +344,14 @@ Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.
Attribut | Description | Type | Valeurs acceptées | Défaut Attribut | Description | Type | Valeurs acceptées | Défaut
----| ----| ----| ----| ---- ----| ----| ----| ----| ----
action | Requis, l'url de requète. | string | — | — action | Requis, l'url de requête. | string | — | —
headers | Les headers de la requète. | object | — | — headers | Les headers de la requête. | object | — | —
multiple | Si envoyer de multiples fichiers est autorisé. | boolean | — | — multiple | Si envoyer de multiples fichiers est autorisé. | boolean | — | —
data | Options additionnelles de la requète. | object | — | — data | Options additionnelles de la requête. | object | — | —
name | Identifiant du fichier. | string | — | file name | Identifiant du fichier. | string | — | file
with-credentials | Si les cookies sont aussi envoyés. | boolean | — |false with-credentials | Si les cookies sont aussi envoyés. | boolean | — |false
show-file-list | Si la liste des fichiers est affichée. | boolean | — | true show-file-list | Si la liste des fichiers est affichée. | boolean | — | true
drag | SI le mode drag'n drop est activé. | boolean | — | false 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 | — | — 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-preview | Fonction pour quand le fichier est cliqué. | function(file) | — | —
on-remove | Fonction pour quand des fichiers sont supprimés. | function(file, fileList) | — | — on-remove | Fonction pour quand des fichiers sont supprimés. | function(file, fileList) | — | —
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment