mirror of https://github.com/ElemeFE/element
Docs: Update french translation (#16208)
* First round of correction * Second round * Cascader and form translation * Last big round of changes * Update changelogpull/16215/head
Baptiste Lombard
Zhi Cun
parent
e1cd0380e4
commit
37c0a9fb61
|
|
@ -4,114 +4,114 @@
|
|||
|
||||
*2019-06-21*
|
||||
|
||||
#### Bug fixes
|
||||
#### Correction de bugs
|
||||
|
||||
- Chore
|
||||
- Fix TS definitions file (#15805 by @NateScarlet)
|
||||
- Correction du fichier de définitions TS (#15805 by @NateScarlet)
|
||||
|
||||
### 2.9.1
|
||||
|
||||
*2019-05-30*
|
||||
|
||||
#### New features
|
||||
#### Nouvelles fonctionnalités
|
||||
|
||||
- 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
|
||||
- Fix some bugs (#15709 by @ziyoung)
|
||||
- Correction de quelques bugs (#15709 by @ziyoung)
|
||||
- Theme
|
||||
- Update api host (#15784 by @iamkun)
|
||||
- Mise à jour de l'hôte api (#15784 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
#### Optimisation
|
||||
|
||||
- Chore
|
||||
- Update InfiniteScroll type (#15794 by @iamkun)
|
||||
- Mise à jour de InfiniteScroll type (#15794 by @iamkun)
|
||||
|
||||
### 2.9.0
|
||||
|
||||
*2019-05-30*
|
||||
|
||||
#### New features
|
||||
#### Nouvelles fonctionnalités
|
||||
|
||||
- Backtop
|
||||
- Add Backtop component (#15541 by @iamkun)
|
||||
- Ajout du composant Backtop (#15541 by @iamkun)
|
||||
- PageHeader
|
||||
- Add PageHeader component (#15714 by @ziyoung)
|
||||
- Ajout du composant PageHeader (#15714 by @ziyoung)
|
||||
- InfiniteScroll
|
||||
- Add InfiniteScroll directive (#15567 by @iamkun)
|
||||
- Ajout de la directive InfiniteScroll (#15567 by @iamkun)
|
||||
- Cascader
|
||||
- Add multiple mode and filter-method (#15611 by @SimonaliaChen)
|
||||
- Ajouter plusieurs mode et filter-method (#15611 by @SimonaliaChen)
|
||||
- Message
|
||||
- Display in stack mode (#15639 by @island205)
|
||||
- Affichage en mode pile (#15639 by @island205)
|
||||
- Tag
|
||||
- Add prop effect (#15725 by @SimonaliaChen)
|
||||
- Ajout d'un effet de prop (#15725 by @SimonaliaChen)
|
||||
- Tabs
|
||||
- Left align title when type is card (#15695 by @luckyCao)
|
||||
- Aligner le titre à gauche lorsque le type est carte (#15695 by @luckyCao)
|
||||
- DatePicker
|
||||
- Support literal strings (#15525 by island205)
|
||||
- Supporte les chaînes de caractères littérales (#15525 by island205)
|
||||
- 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
|
||||
- Add popup background (#15412 by @iamkun)
|
||||
- Ajout d'un popup en arrière plan (#15412 by @iamkun)
|
||||
- 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
|
||||
- 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
|
||||
- Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen)
|
||||
- Correction de la compatibilité ssr et object-fit (#15346 by @SimonaliaChen)
|
||||
- Input
|
||||
- Fix show-word-count style in el-form (#15359 by @lvjiaxuan)
|
||||
- Fix clear icon is not centered (#15354 by @YiiGuxing)
|
||||
- Correction du style de show-word-count dans el-form (#15359 by @lvjiaxuan)
|
||||
- Correction de l'icône d'erreur pas centrée (#15354 by @YiiGuxing)
|
||||
- Calendar
|
||||
- Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue)
|
||||
- Fix October disappear bug (#15394 by @qingdengyue)
|
||||
- Correction du mauvais jour de la semaine quand le jour est dimanche (#15399 by @qingdengyue)
|
||||
- Correction du bug de disparition d'octobre (#15394 by @qingdengyue)
|
||||
- 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
|
||||
- Fix stop propagation problem (#15150 by @infjer)
|
||||
- Correction du problème de propagation d'arrêt (#15150 by @infjer)
|
||||
- Form
|
||||
- Fix input-group within form-item height error (#15457 by @SimonaliaChen)
|
||||
- Fix resetFields issue (15181 by @luckyCao)
|
||||
- Correction de input-group dans l'erreur de hauteur de form-item (#15457 by @SimonaliaChen)
|
||||
- Résolution de l'issue de resetFields (15181 by @luckyCao)
|
||||
- Tooltip
|
||||
- Fix custom tabindex not work (#15619 by @SimonaliaChen )
|
||||
- Correction de tabindex personnalisé ne fonctionnant pas (#15619 by @SimonaliaChen )
|
||||
- Link
|
||||
- Fix link icon style class (#15752 by @iamkun)
|
||||
- Correction de la classe de style d'icône (#15752 by @iamkun)
|
||||
- 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
|
||||
- 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
|
||||
- Label with el-switch repeating event (#15178 by @FAKER-A)
|
||||
- Label avec les événements récurrents el-switch (#15178 by @FAKER-A)
|
||||
- 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
|
||||
- Fix issue 14808 (#14809 by @OverTree)
|
||||
- Résolution de l'issue 14808 (#14809 by @OverTree)
|
||||
- Form
|
||||
- Fix resetFields issue (15181 by @luckyCao)
|
||||
- Résolution du problème de resetFields (15181 by @luckyCao)
|
||||
- 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
|
||||
- Fix loading type definition (#15635 by @iamkun)
|
||||
- Fix Icon type (#15634 by @iamkun)
|
||||
- Fix Link type definition (#15402 by @iamkun)
|
||||
- Correction du type de chargement (#15635 by @iamkun)
|
||||
- Correction du type d'icône (#15634 by @iamkun)
|
||||
- Fixe la définition du type de lien (#15402 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
#### Optimisation
|
||||
|
||||
- Cascader
|
||||
- Refactor (#15611 by @SimonaliaChen)
|
||||
- Chore
|
||||
- Update make new component logic (by @iamkun)
|
||||
- Mise à jour de la logique du nouveau composant (by @iamkun)
|
||||
- Docs
|
||||
- Rename variable in docs (#15185 by @liupl)
|
||||
- Fix image attribute type and default value (#15423 by @haoranyu)
|
||||
- Fix form doc bug (#15228 by @SHERlocked93)
|
||||
|
||||
- Renommage de variables dans la documentation (#15185 by @liupl)
|
||||
- Correction du type d'attribut d'image et de la valeur par défaut (#15423 by @haoranyu)
|
||||
- Correction d'un bug de formulaire (#15228 by @SHERlocked93)
|
||||
|
||||
### 2.8.2
|
||||
|
||||
*2019-04-25*
|
||||
|
|
@ -254,7 +254,7 @@ Docs
|
|||
|
||||
- Form
|
||||
- Correction du style de `label-width` auto (#14955 par @ziyoung)
|
||||
|
||||
|
||||
#### Optimisation
|
||||
- Docs
|
||||
- Correction d'une erreur de lien img (#14957 par @iamkun)
|
||||
|
|
@ -277,7 +277,7 @@ Docs
|
|||
- Couleur d'arrière-plan configurable (#14939 par @ziyoung)
|
||||
- Form
|
||||
- `label-width` supporte la largeur automatique (#14944 by @ziyoung)
|
||||
|
||||
|
||||
#### Optimisation
|
||||
- Docs
|
||||
- Mise à jour de la documentation en espagnol (#14913 par @Gonzalo2310)
|
||||
|
|
@ -456,7 +456,7 @@ Docs
|
|||
#### Breaking changes
|
||||
- Table
|
||||
- Fix params order of row events (by @jikkai in #12086)
|
||||
|
||||
|
||||
### 2.5.4
|
||||
|
||||
*2019-02-01*
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ Spanish documentation is made possible by these community developers:
|
|||
|
||||
French documentation is made possible by these community developers:
|
||||
- [smalesys](https://github.com/smalesys)
|
||||
- [blombard](https://github.com/blombard)
|
||||
|
||||
## Donation
|
||||
If you find Element useful, you can buy us a cup of coffee
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Affiche des messages importants.
|
|||
|
||||
### 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`.
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ Personnalisez le bouton de fermeture avec du texte ou des symboles.
|
|||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="alerte non-fermable"
|
||||
title="alerte non fermable"
|
||||
type="success"
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
## Backtop
|
||||
|
||||
A button to back to top
|
||||
Un bouton pour revenir en haut de la page
|
||||
|
||||
### Basic usage
|
||||
|
||||
Scroll down to see the bottom-right button.
|
||||
Scrollez en bas de la page pour voir le bouton en bas à droite.
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<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>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -18,12 +18,12 @@ Scroll down to see the bottom-right button.
|
|||
|
||||
### Customizations
|
||||
|
||||
Display area is 40px \* 40px.
|
||||
La zone d'affichage est de 40px \* 40px.
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<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">
|
||||
<div
|
||||
style="{
|
||||
|
|
@ -46,15 +46,15 @@ Display area is 40px \* 40px.
|
|||
|
||||
### Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
|
||||
| target | the target to trigger scroll | string | | |
|
||||
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 |
|
||||
| right | right distance | number | | 40 |
|
||||
| bottom | bottom distance | number | | 40 |
|
||||
| target | La cible pour déclencher le scroll | string | | |
|
||||
| visibility-height | Le bouton ne s'affichera pas tant que la hauteur de défilement n'aura pas atteint cette valeur. | number | | 200 |
|
||||
| right | La distance du bord droit | number | | 40 |
|
||||
| bottom | La distance du bord gauche | number | | 40 |
|
||||
|
||||
### Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
| ---------- | ------------------- | ----------- |
|
||||
| click | 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.
|
|||
### 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
|
||||
<el-breadcrumb separator="/">
|
||||
|
|
@ -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|
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| 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é.
|
|||
|
||||
```html
|
||||
<el-row>
|
||||
<el-button>Default</el-button>
|
||||
<el-button>Défaut</el-button>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
|
|
@ -17,7 +17,7 @@ Bouton communément utilisé.
|
|||
</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="success" plain>Success</el-button>
|
||||
<el-button type="info" plain>Info</el-button>
|
||||
|
|
@ -26,7 +26,7 @@ Bouton communément utilisé.
|
|||
</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="success" round>Success</el-button>
|
||||
<el-button type="info" round>Info</el-button>
|
||||
|
|
@ -85,7 +85,7 @@ Bouton sans bordure ni fond.
|
|||
|
||||
### 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Affiche un calendrier.
|
|||
|
||||
### 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
|
||||
<el-calendar v-model="value">
|
||||
</el-calendar>
|
||||
|
|
@ -23,7 +23,7 @@ Affiche un calendrier.
|
|||
|
||||
### 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
|
||||
<el-calendar>
|
||||
<!-- 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.
|
|||
|
||||
### 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.
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Card name</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">Operating button</el-button>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">Bouton</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'List item ' + o }}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Affiche en boucle une série d'images ou de textes dans un espace limité.
|
|||
|
||||
### Usage
|
||||
|
||||
:::demo Utilisez `el-carousel` avec `el-carousel-item`, et vous obtiendrez un carousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise `el-carousel-item`. Par défaut le carousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carousel défilera uniquement quand vous cliquerez sur l'indicateur.
|
||||
:::demo Utilisez `el-carousel` avec `el-carousel-item`, et vous obtiendrez un carrousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise `el-carousel-item`. Par défaut le carrousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carrousel défilera uniquement quand vous cliquerez sur l'indicateur.
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
|
|
@ -47,9 +47,9 @@ Affiche en boucle une série d'images ou de textes dans un espace limité.
|
|||
|
||||
### 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
|
||||
<template>
|
||||
<el-carousel indicator-position="outside">
|
||||
|
|
@ -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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
<el-carousel :interval="5000" arrow="always">
|
||||
|
|
@ -115,9 +115,9 @@ Vous pouvez définir quand les flèches doivent apparaître.
|
|||
|
||||
### 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
|
||||
<template>
|
||||
<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
|
|||
```
|
||||
:::
|
||||
|
||||
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
|
||||
```html
|
||||
|
|
@ -167,11 +167,11 @@ Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le dé
|
|||
line-height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
|
@ -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 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| height | Hauteur du carousel. | string | — | — |
|
||||
| height | Hauteur du carrousel. | string | — | — |
|
||||
| initial-index | Index de la slide initiale (commence à 0). | number | — | 0 |
|
||||
| trigger | Comment les indicateurs sont déclenchés | string | hover/click | hover |
|
||||
| autoplay | Si le 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 |
|
||||
| indicator-position | Position des indicateurs. | string | outside/none | — |
|
||||
| arrow | Détermine quand les flèches sont affichés. | string | always/hover/never | hover |
|
||||
| type | Type du carousel. | string | card | — |
|
||||
| arrow | Détermine quand les flèches sont affichées. | string | always/hover/never | hover |
|
||||
| type | Type du carrousel. | string | card | — |
|
||||
| loop | Affiche les éléments en boucle. | boolean | - | true |
|
||||
| direction | Détermine la direction du défilement. | string | horizontal/vertical | horizontal |
|
||||
|
||||
### Évènements du Carousel
|
||||
### Évènements du Carrousel
|
||||
| Nom | Description | Paramètres |
|
||||
|---------|---------|---------|
|
||||
| change | Se déclenche quand la slide active défile. | Index de la nouvelle slide, index de l'ancienne slide |
|
||||
|
||||
### Méthodes du Carousel
|
||||
### Méthodes du Carrousel
|
||||
| Mathode | Description | Paramètres |
|
||||
|---------- |-------------- | -- |
|
||||
| setActiveItem | Défile manuellement vers une slide. | index de la slide d'arrivée, à partir de 0; ou bien le `name` du `el-carousel-item` correspondant|
|
||||
| prev | Défile vers la slide précédente. | — |
|
||||
| next | Défile vers la slide suivante. | — |
|
||||
|
||||
### Attributs du Carousel-Item
|
||||
### Attributs du Carrousel-Item
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | Nom de l'item, peut être utilisé dans `setActiveItem`. | string | — | — |
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
## Cascader
|
||||
| Se## Cascader
|
||||
|
||||
If the options have a clear hierarchical structure, Cascader can be used to view and select them.
|
||||
Si les options ont une structure hiérarchique claire, Le composant Cascader peut être utilisé pour les afficher et les sélectionner.
|
||||
|
||||
### Basic usage
|
||||
|
||||
There are two ways to expand child option items.
|
||||
Il y a deux manières d'étendres les options enfants.
|
||||
|
||||
:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `props.expandTrigger` attribute defines how child options are expanded.
|
||||
:::demo Assigner l'attribut `options` à un tableau d'options fournit un composant Cascader. L'attribut `props.expandTrigger` définit comment les options enfants sont étendues.
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Child options expand when clicked (default)</span>
|
||||
<span class="demonstration">Les options enfants se développent lorsque vous cliquez dessus (par défaut)</span>
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
@change="handleChange"></el-cascader>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Child options expand when hovered</span>
|
||||
<span class="demonstration">Les options enfants se développent lorsqu'elles sont survolées</span>
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
|
|
@ -238,9 +238,9 @@ There are two ways to expand child option items.
|
|||
|
||||
### Disabled option
|
||||
|
||||
Disable an option by setting a `disabled` field in the option object.
|
||||
Désactivez une option en définissant un champ `disabled` dans l'objet d'option.
|
||||
|
||||
:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props.disabled` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way.
|
||||
:::demo Dans cet exemple, le premier élément du tableau `options` a un champ` disabled: true`, il est donc désactivé. Par défaut, Cascader vérifie le champ `disabled` dans chaque objet option. Si vous utilisez un autre nom de champ pour indiquer si une option est désactivée, vous pouvez l'affecter dans l'attribut `props.disabled` (voir le tableau des API ci-dessous pour plus de détails). Et bien sûr, les noms de champs `value`,` label` et `children` peuvent également être personnalisés de la même manière.
|
||||
```html
|
||||
<el-cascader :options="options"></el-cascader>
|
||||
|
||||
|
|
@ -453,7 +453,7 @@ Disable an option by setting a `disabled` field in the option object.
|
|||
|
||||
### Clearable
|
||||
|
||||
Set `clearable` attribute for `el-cascader` and a clear icon will appear when selected and hovered
|
||||
Définissez l'attribut `clearable` pour` el-cascader` et une icône claire apparaîtra une fois sélectionnée et survolée
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
|
@ -667,9 +667,9 @@ Set `clearable` attribute for `el-cascader` and a clear icon will appear when se
|
|||
|
||||
### Display only the last level
|
||||
|
||||
The input can display only the last level instead of all levels.
|
||||
L'entrée peut afficher uniquement le dernier niveau au lieu de tous les niveaux.
|
||||
|
||||
:::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed.
|
||||
:::demo L'attribut `show-all-levels` définit si tous les niveaux sont affichés. S'il est `false`, seul le dernier niveau est affiché.
|
||||
```html
|
||||
<el-cascader :options="options" :show-all-levels="false"></el-cascader>
|
||||
<script>
|
||||
|
|
@ -880,19 +880,19 @@ The input can display only the last level instead of all levels.
|
|||
|
||||
### Multiple Selection
|
||||
|
||||
Set `props.multiple = true` to use multiple selection.
|
||||
Définissez `props.multiple = true` pour utiliser la sélection multiple.
|
||||
|
||||
:::demo When using multiple selection, all selected tags will display by default, You can set `collapse-tags = true` to fold selected tags.
|
||||
:::demo Lors de l'utilisation de la sélection multiple, toutes les balises sélectionnées seront affichées par défaut. Vous pouvez définir `collapse-tags = true` pour replier les balises sélectionnées.
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Display all tags (default)</span>
|
||||
<span class="demonstration">Afficher toutes les balises (par défaut)</span>
|
||||
<el-cascader
|
||||
:options="options"
|
||||
:props="props"
|
||||
clearable></el-cascader>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Collapse tags</span>
|
||||
<span class="demonstration">Réduire les balises</span>
|
||||
<el-cascader
|
||||
:options="options"
|
||||
:props="props"
|
||||
|
|
@ -984,19 +984,19 @@ Set `props.multiple = true` to use multiple selection.
|
|||
|
||||
### Select any level of options
|
||||
|
||||
In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
|
||||
Dans la sélection simple, seuls les noeuds terminaux peuvent être coché, et dans la sélection multiple, coché les noeuds parents cochera les noeuds terminaux. Lorsque cette fonctionnalité est activée, les noeuds parents et enfants peuvent être dissociés et vous pouvez sélectionner n’importe quel niveau d’options.
|
||||
|
||||
:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.
|
||||
:::demo Définissez `props.checkStrictly = true` pour que l'état vérifié d'un noeud n'affecte pas ses noeuds parents et ses noeuds enfants. Vous pouvez ensuite sélectionner n'importe quel niveau d'options.
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Select any level of options (Single selection)</span>
|
||||
<span class="demonstration">Sélectionnez n'importe quel niveau d'options (Sélection unique)</span>
|
||||
<el-cascader
|
||||
:options="options"
|
||||
:props="{ checkStrictly: true }"
|
||||
clearable></el-cascader>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Select any level of options (Multiple selection)</span>
|
||||
<span class="demonstration">Sélectionnez n'importe quel niveau d'options (sélection multiple)</span>
|
||||
<el-cascader
|
||||
:options="options"
|
||||
:props="{ multiple: true, checkStrictly: true }"
|
||||
|
|
@ -1211,9 +1211,9 @@ In single selection, only the leaf nodes can be checked, and in multiple selecti
|
|||
|
||||
### Dynamic loading
|
||||
|
||||
Dynamic load its child nodes when checked a node.
|
||||
Charge dynamiquement ses noeuds enfants lorsque un noeud est sélectionné.
|
||||
|
||||
:::demo Set `lazy = true` to use dynamic loading, and you have to specify how to load the data source by `lazyload`. There are two parameters of `lazyload`,the first parameter `node` is the node currently clicked, and the `resolve` is a callback that indicate loading is finished which must invoke. To display the status of node more accurately, you can add a `leaf` field (can be modified by `props.leaf`) to indicate whether it is a leaf node. Otherwise, it will be inferred by if has any child nodes.
|
||||
:::demo Définissez `lazy = true` pour utiliser le chargement dynamique. Vous devez Spécifier comment charger la source de données avec` lazyload`. Il existe deux paramètres de `lazyload`, le premier paramètre` node` est le noeud sur lequel l'utilisateur a cliqué, et `resolution` est un callback indiquant que le chargement est terminé et qu'il doit être appelé. Pour afficher le statut du noeud plus précisément, vous pouvez ajouter un champ `leaf` (modifiable par` props.leaf`) pour indiquer s'il s'agit d'un noeud feuille. Sinon, il sera déduit par ses noeuds enfants.
|
||||
```html
|
||||
<el-cascader :props="props"></el-cascader>
|
||||
|
||||
|
|
@ -1234,7 +1234,7 @@ Dynamic load its child nodes when checked a node.
|
|||
label: `Option - ${id}`,
|
||||
leaf: level >= 2
|
||||
}));
|
||||
// Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
|
||||
// Appelez le callback `resolve` pour renvoyer les données des noeuds enfants et indiquer que le chargement est terminé.
|
||||
resolve(nodes);
|
||||
}, 1000);
|
||||
}
|
||||
|
|
@ -1248,19 +1248,19 @@ Dynamic load its child nodes when checked a node.
|
|||
|
||||
### Filterable
|
||||
|
||||
Search and select options with a keyword.
|
||||
Rechercher et sélectionner des options avec un mot clé.
|
||||
|
||||
:::demo Adding `filterable` to `el-cascader` enables filtering. Cascader will match nodes whose label or parent's label (according to `show-all-levels`) includes input keyword. Of course, you can customize search logic by `filter-method` which accepts a function, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.
|
||||
:::demo Ajouter `filterable` à` el-cascader` permet le filtrage. Cascader recherchera les noeuds dont l'étiquette ou l'étiquette du parent (selon `show-all-levels`) inclut le mot-clé input. Bien sûr, vous pouvez personnaliser la logique de recherche en utilisant `filter-method` qui accepte une fonction, le premier paramètre est `node`, le second est `keyword` et doit renvoyer une valeur booléenne indiquant si le résultat est positif.
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Filterable (Single selection)</span>
|
||||
<span class="demonstration">Filtrable (Sélection unique)</span>
|
||||
<el-cascader
|
||||
placeholder="Try searchingL Guide"
|
||||
:options="options"
|
||||
filterable></el-cascader>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Filterable (Multiple selection)</span>
|
||||
<span class="demonstration">Filtrable (Sélection multiple)</span>
|
||||
<el-cascader
|
||||
placeholder="Try searchingL Guide"
|
||||
:options="options"
|
||||
|
|
@ -1476,9 +1476,9 @@ Search and select options with a keyword.
|
|||
|
||||
### Custom option content
|
||||
|
||||
You can customize the content of cascader node.
|
||||
Vous pouvez personnaliser le contenu du noeud cascader.
|
||||
|
||||
:::demo You can customize the content of cascader node by `scoped slot`. You'll have access to `node` and `data` in the scope, standing for the Node object and node data of the current node respectively。
|
||||
:::demo Vous pouvez personnaliser le contenu du noeud cascader avec `scoped slot`. Vous aurez accès à `node` et` data` dans la portée, correspondant respectivement à l'objet Node et aux données de noeud du noeud actuel.
|
||||
```html
|
||||
<el-cascader :options="options">
|
||||
<template slot-scope="{ node, data }">
|
||||
|
|
@ -1695,9 +1695,9 @@ You can customize the content of cascader node.
|
|||
|
||||
### Cascader panel
|
||||
|
||||
`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.
|
||||
`CascaderPanel` est le composant principal de` Cascader`. Il comporte diverses fonctionnalités telles que la sélection unique, la sélection multiple, le chargement dynamique, etc.
|
||||
|
||||
:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.
|
||||
:::demo Tout comme `el-cascader`, vous pouvez définir des options alternatives par `options`, et activer d'autres fonctionnalités par `props`, voir le formulaire d'API ci-dessous pour plus de détails.
|
||||
```html
|
||||
<el-cascader-panel :options="options"></el-cascader-panel>
|
||||
|
||||
|
|
@ -1907,70 +1907,70 @@ You can customize the content of cascader node.
|
|||
```
|
||||
:::
|
||||
|
||||
### Cascader Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
### Cascader Attributs
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value | - | — | — |
|
||||
| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
|
||||
| props | configuration options, see the following table. | object | — | — |
|
||||
| size | size of input | string | medium / small / mini | — |
|
||||
| placeholder | placeholder of input | string | — | Select |
|
||||
| disabled | whether Cascader is disabled | boolean | — | false |
|
||||
| clearable | whether selected value can be cleared | boolean | — | false |
|
||||
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
|
||||
| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
|
||||
| separator | option label separator | string | — | ' / ' |
|
||||
| filterable | whether the options can be searched | boolean | — | — |
|
||||
| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
|
||||
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
|
||||
| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
|
||||
| popper-class | custom class name for Cascader's dropdown | string | — | — |
|
||||
| value / v-model | Valeur de liaison | - | — | — |
|
||||
| options | Les données des options，la clé de `value` et `label` peuvent être personnalisées par `Props`.| array | — | — |
|
||||
| props | Options de configuration, voir le tableau suivant. | object | — | — |
|
||||
| size | Taille de l'entrée | string | medium / small / mini | — |
|
||||
| placeholder | Placeholder de l'input | string | — | Select |
|
||||
| disabled | Si Cascader est désactivé | boolean | — | false |
|
||||
| clearable | Si la valeur sélectionnée peut être effacée | boolean | — | false |
|
||||
| show-all-levels | Afficher ou non tous les niveaux de la valeur sélectionnée dans l'entrée | boolean | — | true |
|
||||
| collapse-tags | Réduire ou non les balises en mode de sélection multiple | boolean | - | false |
|
||||
| separator | Option label separator | string | — | ' / ' |
|
||||
| filterable | Si les options peuvent être recherchées | boolean | — | — |
|
||||
| filter-method | Personnaliser la logique de recherche, le premier paramètre est `node`, le second est `keyword`, et doit renvoyer une valeur booléenne indiquant si le résultat est positif. | function(node, keyword) | - | - |
|
||||
| debounce | Délai de réponse lors de la saisie du mot clé de filtre, en millisecondes | number | — | 300 |
|
||||
| before-filter | Hook fonction avant de filtrer avec la valeur à filtrer en tant que paramètre. Si `false` est renvoyé ou si une `Promise` est renvoyée puis rejetée, le filtrage sera annulé | function(value) | — | — |
|
||||
| popper-class | Nom de classe personnalisé pour la liste déroulante de Cascader | string | — | — |
|
||||
|
||||
### Cascader Events
|
||||
| Event Name | Description | Parameters |
|
||||
| Event Name | Description | Paramètres |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the binding value changes | value |
|
||||
| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
|
||||
| blur | triggers when Cascader blurs | (event: Event) |
|
||||
| focus | triggers when Cascader focuses | (event: Event) |
|
||||
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
|
||||
| remove-tag | triggers when remove tag in multiple selection mode | the value of the tag which is removed |
|
||||
| change | Se déclenche lorsque la valeur de liaison change | value |
|
||||
| expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes |
|
||||
| blur | Se déclenche lorsque Cascader blurs | (event: Event) |
|
||||
| focus | Se déclenche lorsque Cascader à le focus | (event: Event) |
|
||||
| visible-change | Se déclenche lorsque le menu déroulant apparaît / disparaît | vrai quand il apparaît, et faux sinon |
|
||||
| remove-tag | Se déclenche lors de la suppression d'une balise en mode de sélection multiple | la valeur de la balise qui est supprimée |
|
||||
|
||||
### Cascader Slots
|
||||
| Slot Name | Description |
|
||||
|---------|-------------|
|
||||
| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
|
||||
| empty | content when there is no matched options. |
|
||||
| - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. |
|
||||
| empty | Contenu quand il n'y a pas d'options correspondantes. |
|
||||
|
||||
### CascaderPanel Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value | - | — | — |
|
||||
| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
|
||||
| props | configuration options, see the following table. | object | — | — |
|
||||
| value / v-model | Baleur de liaison | - | — | — |
|
||||
| options | Les données des options, la clé de `value` et `label` peuvent être personnalisées par `Props`.| array | — | — |
|
||||
| props | Options de configuration, voir le tableau suivant. | object | — | — |
|
||||
|
||||
### CascaderPanel Events
|
||||
| Event Name | Description | Parameters |
|
||||
| Event Name | Description | Paramètres |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the binding value changes | value |
|
||||
| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
|
||||
| change | Se déclenche lorsque la valeur de liaison change | value |
|
||||
| expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes |
|
||||
|
||||
### CascaderPanel Slots
|
||||
| Slot Name | Description |
|
||||
|---------|-------------|
|
||||
| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
|
||||
| - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. |
|
||||
|
||||
### Props
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| Attribute | Description | Type | Valeurs acceptées | Défaut |
|
||||
| -------- | ----------------- | ------ | ------ | ------ |
|
||||
| expandTrigger | trigger mode of expanding options | string | click / hover | 'click' |
|
||||
| multiple | whether multiple selection is enabled | boolean | - | false |
|
||||
| checkStrictly | whether checked state of a node not affects its parent and child nodes | boolean | - | false |
|
||||
| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | boolean | - | true |
|
||||
| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | boolean | - | false |
|
||||
| lazyLoad | method for loading child nodes data, only works when `lazy` is true | function(node, resolve) | - | - |
|
||||
| value | specify which key of node object is used as the node's value | string | — | 'value' |
|
||||
| label | specify which key of node object is used as the node's label | string | — | 'label' |
|
||||
| children | specify which key of node object is used as the node's children | string | — | 'children' |
|
||||
| disabled | specify which key of node object is used as the node's disabled | string | — | 'disabled' |
|
||||
| leaf | specify which key of node object is used as the node's leaf field | string | — | 'leaf' |
|
||||
| expandTrigger | Mode de déclenchement des options de développement | string | click / hover | 'click' |
|
||||
| multiple | Si la sélection multiple est activée | boolean | - | false |
|
||||
| checkStrictly | Si l'état coché d'un noeud n'affecte pas ses noeuds parents et enfants | boolean | - | false |
|
||||
| emitPath | Lorsque les noeuds cochés changent, émet ou non un tableau du chemin du noeud. Si la valeur est false, n'émet que la valeur du noeud. | boolean | - | true |
|
||||
| lazy | S'il faut charger dynamiquement les noeuds enfants, utiliser avec l'attribut `lazyload` | boolean | - | false |
|
||||
| lazyLoad | Méthode de chargement de données de noeuds enfants, ne fonctionne que lorsque `lazy` est vrai | function(node, resolve) | - | - |
|
||||
| value | Spécifie quelle clé de l'objet noeud est utilisée comme valeur du noeud | string | — | 'value' |
|
||||
| label | Spécifie quelle clé de l'objet noeud est utilisée comme label du noeud | string | — | 'label' |
|
||||
| children | Spécifie quelle clé de l'objet noeud est utilisée en tant qu'enfant du noeud | string | — | 'children' |
|
||||
| disabled | Spécifie quelle clé de l'objet noeud est utilisée comme noeud désactivé | string | — | 'disabled' |
|
||||
| leaf | Spécifie quelle clé de l'objet est noeud utilisée comme champ feuille du noeud | string | — | 'leaf' |
|
||||
|
|
|
|||
|
|
@ -51,9 +51,9 @@ La checkbox peut être désactivée.
|
|||
|
||||
### 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
|
||||
<template>
|
||||
|
|
@ -80,13 +80,13 @@ Utile pour grouper des checkbox, indiquant si une option est selectionnée en v
|
|||
|
||||
### 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
|
||||
|
||||
```html
|
||||
<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>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<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.
|
|||
| value / v-model | La valeur liée. | string / number / boolean | — | — |
|
||||
| label | Valeur de la checkbox quand utilisée dans un `checkbox-group`. | string / number / boolean | — | — |
|
||||
| true-label | Valeur de la checkbox si cochée. | string / number | — | — |
|
||||
| false-label | Valeur de la checkbox si non-cochée. | string / number | — | — |
|
||||
| false-label | Valeur de la checkbox si non cochée. | string / number | — | — |
|
||||
| disabled | Désactive la checkbox. | boolean | — | false |
|
||||
| border | Ajoute une bordure à la checkbox. | boolean | — | false |
|
||||
| size | taille de la checkbox, ne marche que si `border` est 'true' | string | medium / small / mini | — |
|
||||
|
|
@ -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 | — | — |
|
||||
| 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 |
|
||||
| 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.
|
|||
<div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.</div>
|
||||
<div>Retour d'expérience: permets aux utilisateurs de percevoir clairement leurs opérations par le biais d'animations et d'effets interactifs.</div>
|
||||
<div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficacité" name="3">
|
||||
<div>Simplifier le processus: garde chaque 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>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>
|
||||
|
|
@ -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>
|
||||
</el-collapse-item>
|
||||
<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>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>
|
||||
|
|
@ -83,7 +83,7 @@ En mode accordéon, un seul panneau peut être ouvert à la fois.
|
|||
|
||||
### 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
|
||||
```html
|
||||
|
|
@ -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>
|
||||
</el-collapse-item>
|
||||
<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>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>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
## Container
|
||||
Les composants Container servent à structurer la page:
|
||||
|
||||
`<el-container>`: Conteneur de wrapping. QUand iil est placé à l'intérieur de `<el-header>` ou `<el-footer>`, tout les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.
|
||||
`<el-container>`: Conteneur de wrapping. Quand il est placé à l'intérieur de `<el-header>` ou `<el-footer>`, tous les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.
|
||||
|
||||
`<el-header>`: Conteneur pour headers.
|
||||
|
||||
`<el-aside>`: Conteneur pour section latérale (en général un menu).
|
||||
|
||||
`<el-main>`: Conteneur pour le contenu principal.
|
||||
`<el-main>`: Conteneur pour la section principal.
|
||||
|
||||
`<el-footer>`: Conteneur pour footers.
|
||||
|
||||
:::tip
|
||||
Ces composants utlisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `<el-container>` doivent être un des quatres éléments précédents, leur élément père devant obligatoirement être `<el-container>`.
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
## 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
|
||||
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;">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
|
||||
## DatePicker
|
||||
|
||||
Utilisez le DatePicker pour les champs de dates.
|
||||
Utilisez DatePicker pour les champs de dates.
|
||||
|
||||
### Entrez la date
|
||||
|
||||
L'unité de base du DatePicker est le jour.
|
||||
|
||||
:::demo L'unité est déterminée par l'attribut `type`. Vous pouvez ajouter des options 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
|
||||
<template>
|
||||
|
|
@ -148,7 +148,7 @@ Vous pouvez sélectionner une plage de dates.
|
|||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Avec raccourcis</span>
|
||||
<span class="demonstration">Avec des options</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="daterange"
|
||||
|
|
@ -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
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<span class="demonstration">Défaut</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="monthrange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start month"
|
||||
end-placeholder="End month">
|
||||
range-separator="à"
|
||||
start-placeholder="Mois de début"
|
||||
end-placeholder="Mois de fin">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With quick options</span>
|
||||
<span class="demonstration">Avec options</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="monthrange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="To"
|
||||
start-placeholder="Start month"
|
||||
end-placeholder="End month"
|
||||
range-separator="à"
|
||||
start-placeholder="Mois de début"
|
||||
end-placeholder="Mois de fin"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
|
@ -241,19 +241,19 @@ Picking a month range is supported.
|
|||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'This month',
|
||||
text: 'Ce mois',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', [new Date(), new Date()]);
|
||||
}
|
||||
}, {
|
||||
text: 'This year',
|
||||
text: 'Cette année',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date(new Date().getFullYear(), 0);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 6 months',
|
||||
text: 'Les derniers 6 mois',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
|
|
@ -347,7 +347,7 @@ Attention à la capitalisation !
|
|||
| `A` | AM/PM | uniquement pour `format`, majuscules | AM |
|
||||
| `a` | am/pm | uniquement pour `format`, minuscules | am |
|
||||
| `timestamp` | timestamp JS | uniquement pour `value-format`; la variable stockée sera un `number` | 1483326245000 |
|
||||
| `[MM]` | 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
|
||||
```html
|
||||
|
|
@ -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 | — | — |
|
||||
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
|
||||
| range-separator | Séparateur de plage de dates. | string | — | '-' |
|
||||
| default-value | Date par défaut du calendrier, optionnelle. | Date | anything accepted by `new Date()` | — |
|
||||
| default-value | Date par défaut du calendrier, optionnelle. | Date | Tout ce qui est accepté par `new Date()` | — |
|
||||
| default-time | Horaire par défaut quand on sélectionne une plage dates, optionnel. | string[] | Tableau de taille 2, chaque valeur est au format `12:00:00`. La première pour la date de début, la deuxième pour la date de fin. | — |
|
||||
| value-format | Format de la variable stockée, optionnel. Si non spécifié, la valeur 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 | — | — |
|
||||
| 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 |
|
||||
|
|
@ -461,10 +461,10 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
|
|||
### Options du Picker
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | UN tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
|
||||
| disabledDate | Une function qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
|
||||
| shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
|
||||
| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
|
||||
| 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
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## DateTimePicker
|
||||
|
||||
Selectionnez une date et un heure dans un seul picker.
|
||||
Sélectionnez une date et une heure dans un seul picker.
|
||||
|
||||
:::tip
|
||||
DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur `pickerOptions` et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.
|
||||
|
|
@ -46,19 +46,19 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
text: 'Aujourdh\'ui',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
text: 'Hier',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
text: 'Il y a une semaine',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
|
|
@ -112,7 +112,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
text: 'La semaine passée',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
|
|
@ -120,7 +120,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
text: 'Le mois dernier',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
|
|
@ -128,7 +128,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
text: 'Les 2 derniers mois',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
|
|
@ -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 | — | {} |
|
||||
| range-separator | Séparateur de plage. | string | - | '-' |
|
||||
| default-value | Date par défaut du calendrier, optionnelle. | Date | N'importe quelle valeur acceptée par `new Date()` | — |
|
||||
| default-time | L'horaire par défaut après avoir choisi une date. | normal: string / plage de dates: string[] | normal: un string tel que `12:00:00`, range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non-spécifié, `00:00:00` est utilisé. | — |
|
||||
| value-format | Format de la variable stockée, optionnel. Si non-spécifié, La valeur sera un objet Date. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | — |
|
||||
| default-time | L'horaire par défaut après avoir choisi une date. | normal: string / plage de dates: string[] | normal: un string tel que `12:00:00`, range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non spécifié, `00:00:00` est utilisé. | — |
|
||||
| value-format | Format de la variable stockée, optionnel. Si non spécifié, La valeur sera un objet Date. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | — |
|
||||
| name | Identique au `name` de l'input natif | string | — | — |
|
||||
| unlink-panels | Rend indépendants les deux panneaux de plage de dates | boolean | — | false |
|
||||
| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
|
||||
|
|
@ -217,9 +217,9 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
### Options du Picker
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
| shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |
|
||||
| disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
|
||||
| firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |
|
||||
|
||||
### Raccourcis
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ Le Dialog ouvre un modal personnalisable.
|
|||
:::
|
||||
|
||||
:::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
|
||||
|
|
@ -56,7 +56,7 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
|
|||
|
||||
```html
|
||||
<!-- 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-table :data="gridData">
|
||||
|
|
@ -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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
<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
|
|||
:::
|
||||
|
||||
:::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
|
||||
|
|
@ -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 |
|
||||
| top | Valeur du `margin-top` du CSS du Dialog. | string | — | 15vh |
|
||||
| modal | Si un masque est affiché. | boolean | — | true |
|
||||
| modal-append-to-body | Si il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean | — | true |
|
||||
| append-to-body | Si il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean | — | false |
|
||||
| modal-append-to-body | S'il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean | — | true |
|
||||
| append-to-body | S'il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean | — | false |
|
||||
| lock-scroll | Si le défilement du body est désactivé. | boolean | — | true |
|
||||
| custom-class | Nom de classe pour le Dialog | string | — | — |
|
||||
| close-on-click-modal | Si le Dialog peut être fermé en cliquant sur le masque. | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ Séparer le texte de deux paragraphes.
|
|||
```html
|
||||
<template>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -20,17 +20,17 @@ Séparer le texte de deux paragraphes.
|
|||
|
||||
### Contenu personnalisé
|
||||
|
||||
Vous ajouter du contenu dans la ligne.
|
||||
Vous ajouter du contenu dans la ligne de séparation.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -57,5 +57,5 @@ Vous ajouter du contenu dans la ligne.
|
|||
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| direction | Régle la direction du séparateur. | string | horizontal / vertical | horizontal |
|
||||
| content-position | Personnalise le contenu du séparateur. | String | left / right / center | center |
|
||||
| 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 |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| 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 |
|
||||
| divided | Si un diviseur doit être affiché. | boolean | — | false |
|
||||
| icon | Classe de l'icône. | string | — | — |
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ Il peut contenir toutes sortes de champs tels que `input`, `select`, `radio` et
|
|||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
<el-date-picker type="date" placeholder="Choisissez une date" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
|
|
@ -49,8 +49,8 @@ Il peut contenir toutes sortes de champs tels que `input`, `select`, `radio` et
|
|||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
<el-button type="primary" @click="onSubmit">Créer</el-button>
|
||||
<el-button>Annuler</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -188,7 +188,7 @@ Le composant Form vous permet d'effectuer des vérifications, afin de détecter
|
|||
<el-form-item label="Activity time" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
<el-date-picker type="date" placeholder="Choisissez une date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
|
|
@ -219,8 +219,8 @@ Le composant Form vous permet d'effectuer des vérifications, afin de détecter
|
|||
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Créer</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Réinitialiser</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -287,7 +287,7 @@ Le composant Form vous permet d'effectuer des vérifications, afin de détecter
|
|||
|
||||
Cet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.
|
||||
|
||||
:::demo Here we use `status-icon` to reflect validation result as an icon.
|
||||
:::demo Ici, nous utilisons `status-icon` pour afficher le résultat de la validation sous forme d'icône.
|
||||
```html
|
||||
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
|
|
@ -301,7 +301,7 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
|
|||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Réinitialiser</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -309,14 +309,14 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
|
|||
data() {
|
||||
var checkAge = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('Please input the age'));
|
||||
return callback(new Error('Veuillez entrer l\'âge'));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('Please input digits'));
|
||||
callback(new Error('Veuillez entrer des chiffres'));
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('Age must be greater than 18'));
|
||||
callback(new Error('L\'âge doit être supérieur à 18 ans'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
|
@ -325,7 +325,7 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
|
|||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
callback(new Error('Veuillez entrer le mot de passe'));
|
||||
} else {
|
||||
if (this.ruleForm.checkPass !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass');
|
||||
|
|
@ -335,9 +335,9 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
|
|||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
callback(new Error('Veuillez entrer à nouveau le mot de passe'));
|
||||
} else if (value !== this.ruleForm.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
callback(new Error('Les deux entrées ne correspondent pas!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
|
@ -394,8 +394,8 @@ Les callback de validations personnalisées doivent être appelées. Un usage pl
|
|||
prop="email"
|
||||
label="Email"
|
||||
:rules="[
|
||||
{ required: true, message: 'Please input email address', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }
|
||||
{ required: true, message: 'Veuillez entrer l'adresse e-mail', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Veuillez entrer une adresse e-mail valide', trigger: ['blur', 'change'] }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="dynamicValidateForm.email"></el-input>
|
||||
|
|
@ -406,15 +406,15 @@ Les callback de validations personnalisées doivent être appelées. Un usage pl
|
|||
:key="domain.key"
|
||||
:prop="'domains.' + index + '.value'"
|
||||
:rules="{
|
||||
required: true, message: 'domain can not be null', trigger: 'blur'
|
||||
required: true, message: 'domain ne peut pas être null', trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Supprimer</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
|
||||
<el-button @click="addDomain">New domain</el-button>
|
||||
<el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
|
||||
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Soumettre</el-button>
|
||||
<el-button @click="addDomain">Nouveau domaine</el-button>
|
||||
<el-button @click="resetForm('dynamicValidateForm')">Réinitialiser</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -471,15 +471,15 @@ Les callback de validations personnalisées doivent être appelées. Un usage pl
|
|||
label="age"
|
||||
prop="age"
|
||||
:rules="[
|
||||
{ required: true, message: 'age is required'},
|
||||
{ type: 'number', message: 'age must be a number'}
|
||||
{ required: true, message: 'l\'âge est requis'},
|
||||
{ type: 'number', message: 'l\'âge doit être un nombre'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
|
||||
<el-button @click="resetForm('numberValidateForm')">Reset</el-button>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">Soumettre</el-button>
|
||||
<el-button @click="resetForm('numberValidateForm')">Réinitialiser</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -526,18 +526,18 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
|
|||
<el-input v-model="sizeForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="sizeForm.region" placeholder="please select your zone">
|
||||
<el-select v-model="sizeForm.region" placeholder="veuillez sélectionner votre zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
|
||||
<el-date-picker type="date" placeholder="Choisissez une date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
|
||||
<el-time-picker placeholder="Choisissez une heure" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
|
|
@ -553,8 +553,8 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
<el-button type="primary" @click="onSubmit">Créer</el-button>
|
||||
<el-button>Annuler</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
|
@ -609,7 +609,7 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
|
|||
| validate | Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée. | Function(callback: Function(boolean, object)) |
|
||||
| validateField | Valide un ou plusieurs champs du formulaire. | Function(props: string \| array, callback: Function(errorMessage: string)) |
|
||||
| resetFields | Efface tout les champs et les résultats de validation. | — |
|
||||
| clearValidate | Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. Si il est omis, tout les champs seront concernés. | Function(props: string \| array) |
|
||||
| clearValidate | Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. S'il est omis, tout les champs seront concernés. | Function(props: string \| array) |
|
||||
|
||||
### Évènnements de Form
|
||||
|
||||
|
|
@ -626,7 +626,7 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
|
|||
| label-width | Largeur du label, e.g. '50px'. La largeur `auto` est supportée. | string | — | — |
|
||||
| required | Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation. | boolean | — | false |
|
||||
| rules | Règles de validation du formulaire. | object | — | — |
|
||||
| error | Message d'erreur du champ. Si il est modifié, le champ l'affichera immédiatement. | string | — | — |
|
||||
| error | Message d'erreur du champ. S'il est modifié, le champ l'affichera immédiatement. | string | — | — |
|
||||
| show-message | Si le message d'erreur doit apparaître. | boolean | — | true |
|
||||
| inline-message | Si le message d'erreur doit être en ligne avec le champ. | boolean | — | false |
|
||||
| size | Contrôle la taille du FormItem. | string | medium / small / mini | - |
|
||||
|
|
|
|||
|
|
@ -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-share"></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>
|
||||
|
||||
```
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
## 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
|
||||
Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
|
||||
### Utilisation de base
|
||||
Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la méthode de chargement lors du défilement vers le bas.
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
|
|
@ -29,7 +29,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
|
|||
```
|
||||
:::
|
||||
|
||||
### Disable Loading
|
||||
### Désactiver le chargement
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
|
@ -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>
|
||||
</ul>
|
||||
<p v-if="loading">Loading...</p>
|
||||
<p v-if="noMore">No more</p>
|
||||
<p v-if="noMore">Pas plus</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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-delay | throttle delay (ms) | number | - |200 |
|
||||
| infinite-scroll-distance| trigger distance (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-disabled | Est désactivé | boolean | - |false |
|
||||
| infinite-scroll-delay | Throttle le delais (ms) | number | - |200 |
|
||||
| infinite-scroll-distance| Distance de déclenchement (px) | number |- |0 |
|
||||
| infinite-scroll-immediate | S'il faut exécuter la méthode de chargement immédiatement, au cas où le contenu ne pourrait pas être set à l'état initial. | boolean | - |true |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Un champ d'input de valeurs numériques, avec un domaine personnalisable.
|
|||
|
||||
### Usage
|
||||
|
||||
:::demo Liez une variable à `v-model` dans l'element `<el-input-number>` et c'est tout !
|
||||
:::demo Liez une variable à `v-model` dans l'élément `<el-input-number>` et c'est tout !
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
|
@ -111,7 +111,7 @@ Vous pouvez déterminer un pas pour le champs.
|
|||
:::
|
||||
|
||||
:::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
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Le champ d'input de base.
|
||||
|
||||
:::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.
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Lien souligné.
|
|||
|
||||
```html
|
||||
<div>
|
||||
<el-link :underline="false">Non-souligné</el-link>
|
||||
<el-link :underline="false">non souligné</el-link>
|
||||
<el-link>Souligné</el-link>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -288,7 +288,7 @@ Le menu vertical peut être réduit.
|
|||
| show-timeout | Délai avant de montrer un sous-menu. | number | — | 300 |
|
||||
| hide-timeout | Délai avant de cacher un sous-menu. | number | — | 300 |
|
||||
| disabled | Si le sous-menu est désactivé. | boolean | — | false |
|
||||
| popper-append-to-body | Si il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété. | boolean | - | Sous-menus de niveau 1: true / autres sous-menus: false |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
|
|
@ -213,7 +213,7 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe
|
|||
export default {
|
||||
methods: {
|
||||
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,
|
||||
confirmButtonText: 'Enregistrer',
|
||||
cancelButtonText: 'Ne pas enregistrer'
|
||||
|
|
@ -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. | — | — |
|
||||
| showClose | Si l'icône de fermeture doit être affichée. | boolean | — | true |
|
||||
| beforeClose | La callback de pré-fermeture qui empèchera MessageBox de se fermer. | function(action, instance, done), ou `action` peut-être 'confirm', 'cancel' ou 'close'; `instance` est l'instance de MessageBox; `done` est la méthode pour fermer l'instance. | — | — |
|
||||
| distinguishCancelAndClose | Si il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox. | boolean | — | false |
|
||||
| distinguishCancelAndClose | S'il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox. | boolean | — | false |
|
||||
| lockScroll | Si le défilement de la page doit être bloqué lorsque la MessageBox est active. | boolean | — | true |
|
||||
| showCancelButton | Si le bouton annuler doit être affiché. | boolean | — | false (true dans le cas de confirm ou prompt). |
|
||||
| showConfirmButton | Si le bouton confirmer doit être affiché. | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## 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
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Affiche une notification globale dans un coin de la page.
|
|||
|
||||
### Usage
|
||||
|
||||
:::demo Element enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configure les champs `title` et` message`. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec `duration`. Si la durée est mise à `0`, la notification ne se fermera pas. `duration` prends donc un `Number` in millisecondes.
|
||||
:::demo Element enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configurer les champs `title` et` message`. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec `duration`. Si la durée est mise à `0`, la notification ne se fermera pas. `duration` prends donc un `Number` en millisecondes.
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
|
@ -47,7 +47,7 @@ Affiche une notification globale dans un coin de la page.
|
|||
|
||||
### 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`.
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## 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
|
||||
|
||||
|
|
@ -22,18 +22,18 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
|
|||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| Attribute | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| title | main title | string | — | Back |
|
||||
| content | content | string | — | — |
|
||||
| title | titre principal | string | — | Back |
|
||||
| content | contenu | string | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|----------- |-------------- |----------- |
|
||||
| back | triggers when right side is clicked | — |
|
||||
| back | se déclenche lorsque vous cliquez sur le côté droit | — |
|
||||
|
||||
### Slots
|
||||
| slot | Description |
|
||||
|---------- | ---------------------- |
|
||||
| title | title content |
|
||||
| content | content |
|
||||
| title | contenu du titre |
|
||||
| content | contenu |
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ Vous pouvez ajouter du texte à chaque score.
|
|||
|
||||
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
|
||||
<el-rate
|
||||
|
|
@ -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 |
|
||||
| high-threshold | Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. | number | — | 4 |
|
||||
| colors | colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
|
||||
| void-color | Couleur des icônes non-sélectionnées. | string | — | #C6D1DE |
|
||||
| disabled-void-color | Couleur des icônes non-sélectionnées en lecture seule. | string | — | #EFF2F7 |
|
||||
| void-color | Couleur des icônes non sélectionnées. | string | — | #C6D1DE |
|
||||
| disabled-void-color | Couleur des icônes non sélectionnées en lecture seule. | string | — | #EFF2F7 |
|
||||
| icon-classes | Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
|
||||
| void-icon-class | Classe des icônes non-sélectionnées. | string | — | el-icon-star-off |
|
||||
| disabled-void-icon-class | Classe des icônes non-sélectionnées en lecture seule. | string | — | el-icon-star-on |
|
||||
| void-icon-class | Classe des icônes non sélectionnées. | string | — | el-icon-star-off |
|
||||
| disabled-void-icon-class | Classe des icônes non sélectionnées en lecture seule. | string | — | el-icon-star-on |
|
||||
| show-text | Si du texte doit apparaître à droite des étoiles. | boolean | — | false |
|
||||
| show-score | Si le score doit apparaître. Incompatible avec show-text. | boolean | — | false |
|
||||
| text-color | Couleur du texte. | string | — | #1F2D3D |
|
||||
|
|
|
|||
|
|
@ -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-data-text | Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No data |
|
||||
| popper-class | Classe du menu déroulant. | string | — | — |
|
||||
| reserve-keyword | Quand `multiple` et `filter` sont activés, 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 |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 | — | — |
|
||||
| debounce | Délai après écriture en millisecondes, marche quand `show-input` est `true`. | number | — | 300 |
|
||||
| tooltip-class | Classe du tooltip. | string | — | — |
|
||||
| marks | Marqueurs， les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object | — | — |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
<el-table
|
||||
|
|
@ -833,7 +833,7 @@ Vous pouvez activer la sélection d'une ligne.
|
|||
|
||||
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
|
||||
<template>
|
||||
<el-table
|
||||
|
|
@ -1889,7 +1889,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
|
|||
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ Les onglets peuvent être stylisés comme des cartes.
|
|||
|
||||
### Style carte avec bordure
|
||||
|
||||
ONglets avec style de carte et bordure.
|
||||
Onglets avec style de carte et bordure.
|
||||
|
||||
:::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
|
|||
|
||||
### 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
|
||||
<div class="tag-group">
|
||||
<span class="tag-group__title">Dark</span>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
|
|||
|
||||
### 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
|
||||
```html
|
||||
|
|
@ -166,7 +166,7 @@ Vous pouvez également définir un intervalle libre.
|
|||
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
|
||||
| range-separator | Séparateur d'intervalle. | string | - | '-' |
|
||||
| default-value | Optionnel, date d'aujourd'hui par défaut. | `Date` pour le TimePicker, `string` pour le TimeSelect | Toute valeur acceptée par `new Date()` pour le TimePicker, une valeur sélectionnable pour TimeSelect. | — |
|
||||
| value-format | Optionnel, uniquement pour TimePicker, format de la valeur. Si non-spécifié, la valeur sera un objet `Date`. | string | Voir [date formats](#/en-US/component/date-picker#date-formats) | — |
|
||||
| value-format | Optionnel, uniquement pour TimePicker, format de la valeur. Si non spécifié, la valeur sera un objet `Date`. | string | Voir [date formats](#/en-US/component/date-picker#date-formats) | — |
|
||||
| name | Attribut `name` natif de l'input. | string | — | — |
|
||||
| prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time |
|
||||
| clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
<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
|
|||
| filterable | Si Transfer est filtrable. | boolean | — | false |
|
||||
| filter-placeholder | Placeholder du champ de filtrage. | string | — | Enter keyword |
|
||||
| filter-method | Méthode de filtrage. | function | — | — |
|
||||
| target-order | Ordre de tri des éléments de la liste d'arrivée. Si il est à `original`, les éléments garderont le même ordre que la liste d'origine. Si à `push`, les nouveaux éléments seront mis à la suite des anciens. Si mis à `unshift`, les nouveaux éléments seront mis en haut de la liste. | string | original / push / unshift | original |
|
||||
| target-order | Ordre de tri des éléments de la liste d'arrivée. S'il est à `original`, les éléments garderont le même ordre que la liste d'origine. Si à `push`, les nouveaux éléments seront mis à la suite des anciens. Si mis à `unshift`, les nouveaux éléments seront mis en haut de la liste. | string | original / push / unshift | original |
|
||||
| titles | Titres des listes. | array | — | ['List 1', 'List 2'] |
|
||||
| button-texts | Textes des boutons. | array | — | [ ] |
|
||||
| render-content | Fonction de rendu pour les objets. | function(h, option) | — | — |
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ Voici la structure basique.
|
|||
|
||||
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
|
||||
<el-tree
|
||||
:props="props"
|
||||
|
|
@ -135,7 +135,7 @@ Vous pouvez activer la sélection des noeuds.
|
|||
|
||||
### 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
|
||||
<el-tree
|
||||
:props="props"
|
||||
|
|
@ -818,7 +818,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
|
|||
|
||||
### 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) | — | — |
|
||||
| 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é.
|
|||
|
||||
Attribut | Description | Type | Valeurs acceptées | Défaut
|
||||
----| ----| ----| ----| ----
|
||||
action | Requis, l'url de requète. | string | — | —
|
||||
headers | Les headers de la requète. | object | — | —
|
||||
action | Requis, l'url de requête. | string | — | —
|
||||
headers | Les headers de la requête. | object | — | —
|
||||
multiple | Si envoyer de multiples fichiers est autorisé. | boolean | — | —
|
||||
data | Options additionnelles de la requète. | object | — | —
|
||||
data | Options additionnelles de la requête. | object | — | —
|
||||
name | Identifiant du fichier. | string | — | file
|
||||
with-credentials | Si les cookies sont aussi envoyés. | boolean | — |false
|
||||
show-file-list | Si la liste des fichiers est affichée. | boolean | — | true
|
||||
drag | SI le mode drag'n drop est activé. | boolean | — | false
|
||||
drag | Si le mode drag'n drop est activé. | boolean | — | false
|
||||
accept | [Types de fichiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) acceptés, ne marche pas si `thumbnail-mode` est `true`. | string | — | —
|
||||
on-preview | Fonction pour quand le fichier est cliqué. | function(file) | — | —
|
||||
on-remove | Fonction pour quand des fichiers sont supprimés. | function(file, fileList) | — | —
|
||||
|
|
|
|||
Loading…
Reference in New Issue