mirror of https://github.com/ElemeFE/element
Doc: French translation update (#14643)
* Fix the translation of the title of CONTRIBUTING.fr-FR.md * Doc: update i18n.md with the croatian language * Doc: Fix some typos after proofreading in french translation * Doc: update translation of color.md (fr-FR) * Doc: translate border.md into french (fr-FR)pull/14648/head
Simon Malesys
Zhi Cun
parent
b7ee84f39a
commit
d26809cb35
|
|
@ -1,4 +1,4 @@
|
|||
# Guide de contribution à l'assurance-chômage par élément
|
||||
# Guide à destination des contributeurs d'Element UI
|
||||
|
||||
Bonjour! Merci d'avoir choisi Element UI.
|
||||
|
||||
|
|
|
|||
|
|
@ -52,19 +52,19 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
## Border
|
||||
## Bordure
|
||||
|
||||
We standardize the borders that can be used in buttons, cards, pop-ups and other components.
|
||||
Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.
|
||||
|
||||
### Border
|
||||
### Bordure
|
||||
|
||||
There are few border styles to choose.
|
||||
Il y a plusieurs styles de bordure que vous pouvez choisir.
|
||||
|
||||
<table class="demo-border">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text">Name</td>
|
||||
<td class="text">Thickness</td>
|
||||
<td class="text">Nom</td>
|
||||
<td class="text">Épaisseur</td>
|
||||
<td class="line">Demo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -86,49 +86,49 @@ There are few border styles to choose.
|
|||
|
||||
### Radius
|
||||
|
||||
There are few radius styles to choose.
|
||||
Il y a plusieurs styles de radius que vous pouvez choisir.
|
||||
|
||||
<el-row :gutter="12" class="demo-radius">
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">No Radius</div>
|
||||
<div class="title">Pas de radius</div>
|
||||
<div class="value">border-radius: 0px</div>
|
||||
<div class="radius"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">Small Radius</div>
|
||||
<div class="title">Petit radius</div>
|
||||
<div class="value">border-radius: {{borderRadiusSmall}}</div>
|
||||
<div
|
||||
class="radius"
|
||||
<div
|
||||
class="radius"
|
||||
:style="{ borderRadius: borderRadiusSmall }"
|
||||
></div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">Large Radius</div>
|
||||
<div class="title">Grand radius</div>
|
||||
<div class="value">border-radius: {{borderRadiusBase}}</div>
|
||||
<div
|
||||
<div
|
||||
class="radius"
|
||||
:style="{ borderRadius: borderRadiusBase }"
|
||||
></div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">Round Radius</div>
|
||||
<div class="title">Radius rond</div>
|
||||
<div class="value">border-radius: 30px</div>
|
||||
<div class="radius radius-30"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Shadow
|
||||
### Ombres
|
||||
|
||||
There are few shaodw styles to choose.
|
||||
Il y a plusieurs styles d'ombres que vous pouvez choisir.
|
||||
|
||||
<div
|
||||
<div
|
||||
class="demo-shadow"
|
||||
:style="{ boxShadow: boxShadowBase }"
|
||||
></div>
|
||||
<span class="demo-shadow-text">Basic Shaodw box-shadow: {{boxShadowBase}}</span>
|
||||
<span class="demo-shadow-text">Ombre de base, box-shadow: {{boxShadowBase}}</span>
|
||||
|
||||
<div
|
||||
<div
|
||||
class="demo-shadow"
|
||||
:style="{ boxShadow: boxShadowLight }"
|
||||
></div>
|
||||
<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
|
||||
<span class="demo-shadow-text">Ombre légère, box-shadow: {{boxShadowLight}}</span>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ La couleur principale d'Element est un bleu clair et agréable.
|
|||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="10" :xs="{span: 12}">
|
||||
<div class="demo-color-box" :style="{ background: primary }">Brand Color
|
||||
<div class="demo-color-box" :style="{ background: primary }">Couleur principale
|
||||
<div class="value">#409EFF</div>
|
||||
<div class="bg-color-sub" :style="{ background: tintColor(primary, 0.9) }">
|
||||
<div
|
||||
|
|
@ -114,11 +114,11 @@ La couleur principale d'Element est un bleu clair et agréable.
|
|||
|
||||
### Couleurs secondaires
|
||||
|
||||
En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple un couleur de danger pour indiquer une opération dangereuse.
|
||||
En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box" :style="{ background: success }">Success
|
||||
<div class="demo-color-box" :style="{ background: success }">Succès
|
||||
<div class="value">#67C23A</div>
|
||||
<div class="bg-color-sub">
|
||||
<div
|
||||
|
|
@ -131,7 +131,7 @@ En plus de la couleur principale, vous devrez sans doute utiliser d'autres coule
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box" :style="{ background: warning }">Warning
|
||||
<div class="demo-color-box" :style="{ background: warning }">Avertissement
|
||||
<div class="value">#E6A23C</div>
|
||||
<div class="bg-color-sub">
|
||||
<div
|
||||
|
|
@ -211,14 +211,14 @@ Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous p
|
|||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box-group">
|
||||
<div
|
||||
<div
|
||||
class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: black }"
|
||||
>Basic Black<div class="value">{{black}}</div></div>
|
||||
>Noir<div class="value">{{black}}</div></div>
|
||||
<div
|
||||
class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
|
||||
>Basic White<div class="value">{{white}}</div></div>
|
||||
>Blanc<div class="value">{{white}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
## Thème
|
||||
Element utlise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons trois méthodes pour changer les variables de style.
|
||||
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 trois méthodes pour changer les variables de style.
|
||||
|
||||
### Changer la couleur du thème
|
||||
Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleau clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.
|
||||
Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.
|
||||
|
||||
Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour un importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).
|
||||
Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).
|
||||
|
||||
### Mettre à jour les variables SCSS de votre projet
|
||||
`theme-chalk` est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. `element-variables.scss`:
|
||||
|
|
@ -51,7 +51,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
|
|||
```
|
||||
|
||||
#### <strong>Initialisation d'un fichier de variable</strong>
|
||||
Après l'installation des paquets ci-dessus, une commande appellée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour intialiser le fichier de variables, `element-variables.scss` par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.
|
||||
Après l'installation des paquets ci-dessus, une commande appelée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour initialiser le fichier de variables, `element-variables.scss` par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.
|
||||
|
||||
```shell
|
||||
et -i [nom du fichier]
|
||||
|
|
@ -88,7 +88,7 @@ $--color-primary: red;
|
|||
```
|
||||
|
||||
#### <strong>Générer le thème</strong>
|
||||
Après avoir sauvegarder le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier:
|
||||
Après avoir sauvegardé le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier:
|
||||
```shell
|
||||
et
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ webpack.config.js
|
|||
|
||||
## Compatible avec `vue-i18n@5.x`
|
||||
|
||||
Element est compatible avec [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), ce qui rends la changement de langue encore plus simple.
|
||||
Element est compatible avec [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), ce qui rend le changement de langue encore plus simple.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
|
|
@ -221,7 +221,7 @@ Actuellement, Element supporte les langues suivantes:
|
|||
<li>Serbe (sr)</li>
|
||||
<li>Basque (eu)</li>
|
||||
<li>Kirghize (kg)</li>
|
||||
<li>Croatian (hr)</li>
|
||||
<li>Croate (hr)</li>
|
||||
<li>Arménien (hy)</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,4 +29,4 @@ Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec
|
|||
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Quick Start](/#/fr-FR/component/quickstart).
|
||||
Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).
|
||||
|
|
|
|||
|
|
@ -312,7 +312,7 @@ Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déj
|
|||
|
||||
### Classes pour cacher certains éléments
|
||||
|
||||
Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutée à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:
|
||||
Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:
|
||||
|
||||
```js
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ Il est possible d'afficher du contenu un peu plus varié et personnalisé.
|
|||
:::
|
||||
|
||||
:::tip
|
||||
Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau `VNode` avec l'ancien `VNode`, puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ([#8931](https://github.com/ElemeFE/element/issues/8931)). dans ce cas, Vous pouvez ajouter une clé unique à `VNode` à chaque fois que MessageBox s'ouvre: [example](https://jsfiddle.net/zhiyang/ezmhq2ef).
|
||||
Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau `VNode` avec l'ancien `VNode`, puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ([#8931](https://github.com/ElemeFE/element/issues/8931)). Dans ce cas, Vous pouvez ajouter une clé unique à `VNode` à chaque fois que MessageBox s'ouvre: [exemple](https://jsfiddle.net/zhiyang/ezmhq2ef).
|
||||
:::
|
||||
|
||||
### Utiliser du HTML
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ new Vue({
|
|||
});
|
||||
```
|
||||
|
||||
Exemple complet (Liste complète des composants dans [components.json](https://github.com/ElemeFE/element/blob/master/components.json)):
|
||||
Exemple complet (liste complète des composants dans [components.json](https://github.com/ElemeFE/element/blob/master/components.json)):
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
|
|
|
|||
|
|
@ -1737,10 +1737,10 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
|
|||
| cell-click | Se déclenche quand l'utilisateur clique sur une cellule. | row, column, cell, event |
|
||||
| cell-dblclick | Se déclenche quand l'utilisateur double-clique sur une cellule. | row, column, cell, event |
|
||||
| row-click | Se déclenche quand l'utilisateur clique sur une ligne. | row, column, event |
|
||||
| row-contextmenu | Se déclenche quand l'utilisateur fait un click droit sur une ligne. | row, column, event |
|
||||
| row-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une ligne. | row, column, event |
|
||||
| row-dblclick | Se déclenche quand l'utilisateur double-clique sur une ligne. | row, column, event |
|
||||
| header-click | Se déclenche quand l'utilisateur clique sur une colonne du header. | column, event |
|
||||
| header-contextmenu | Se déclenche quand l'utilisateur fait un click droit sur une colonne du header. | column, event |
|
||||
| header-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header. | column, event |
|
||||
| sort-change | Se déclenche quand l'ordre de tri change. | { column, prop, order } |
|
||||
| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered. | filters |
|
||||
| current-change | Se déclenche quand la ligne sélectionnée change. | currentRow, oldCurrentRow |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Affiche une suite d'évènements dans un ordre chronologique.
|
|||
|
||||
### Usage
|
||||
|
||||
La ligne du temps peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.
|
||||
La timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
|
|
|||
Loading…
Reference in New Issue