From 1b3fcd11c6b13c7b93f58ea3d8d5383961945ee9 Mon Sep 17 00:00:00 2001 From: Bastien Saro Chassetuillier Date: Wed, 11 Jan 2017 14:49:56 +0100 Subject: [PATCH 1/7] traduction de class-and-style.md --- src/v2/guide/class-and-style.md | 70 ++++++++++++++++----------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index c5a358966e..41ef921faa 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -1,24 +1,24 @@ --- -title: Class and Style Bindings +title: Liaisons de Class et Style type: guide order: 6 --- -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays. +Un besoin classique de la **liaison de données**, est de manipuler la *liste des classes* et le *style* d'un élément. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il est seulement nécessaire de générer une chaîne de caractère avec notre expression. Cependant, jouer avec des concaténations de chaîne de caractères est ennuyant, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux. -## Binding HTML Classes +## Lier l'attribut "class" -### Object Syntax +### Syntaxe Objet -We can pass an object to `v-bind:class` to dynamically toggle classes: +Il est possible de donner un objet à `v-bind:class` pour permuter les classes automatiquement : ``` html
``` -The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`. +La syntaxe ci-dessus signifie que la présence de la classe `active` sera déterminé par la [véracité](https://developer.mozilla.org/fr/docs/Glossaire/Truthy) de la propriété `isActive`. -You can have multiple classes toggled by having more fields in the object. In addition, the `v-bind:class` directive can also co-exist with the plain `class` attribute. So given the following template: +Vous pouvez permuter plusieurs classes en ayant plus de champs dans l'objet. De plus, la directive `v-bind:class` peut aussi coexister avec l'attribut `class`. Donc, avec le template suivant : ``` html
``` -And the following data: +Et les données suivantes : ``` js data: { @@ -35,15 +35,15 @@ data: { } ``` -It will render: +Le rendu sera : ``` html
``` -When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`. +Quand `isActive` ou `hasError` change, la liste des classes sera mise à jour en conséquence. Par exemple, si `hasError` devient `true`, la liste des classes deviendra `"static active text-danger"`. -The bound object doesn't have to be inline: +L'objet lié n'as pas besoin d'être en ligne : ``` html
@@ -57,7 +57,7 @@ data: { } ``` -This will render the same result. We can also bind to a [computed property](computed.html) that returns an object. This is a common and powerful pattern: +Ceci rendra le même résultat. Il est également possible de lier une [propriétés calculées](computed.html) qui retourne un objet. C'est une méthode commune et puissante : ``` html
@@ -77,9 +77,9 @@ computed: { } ``` -### Array Syntax +### Syntaxe Tableau -We can pass an array to `v-bind:class` to apply a list of classes: +Il est possible de donner un tableau à `v-bind:class` pour appliquer une liste de classe : ``` html
@@ -91,33 +91,33 @@ data: { } ``` -Which will render: +Ce qui rendra : ``` html
``` -If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression: +Si vous voulez permuter une classe de la liste en fonction d'une condition, vous pouvez le faire avec une expression ternaire : ``` html
``` -This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is `true`. +Ceci appliquera toujours la classe `errorClass`, mais appliquera `activeClass` uniquement quand `isActive` vaut `true`. -However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax: +En revanche, ce peut être un peu verbeux si vous avez plusieurs classes conditionnelles. C'est pourquoi il est aussi possible d'utiliser la syntaxe objet dans la syntaxe tableau : ``` html
``` -### With Components +### Avec des Composants -> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later. +> Cette section suppose la connaissance de [Vue Composants](components.html). N'hésitez pas à l'ignorer et y revenir plus tard. -When you use the `class` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten. +Quand vous utilisez l'attribut `class` sur un composant personnalisé, ces classes seront ajoutées à l'élément à la racine du composant. Les classes présentes sur cet élément ne seront pas réécrites. -For example, if you declare this component: +Par exemple, si vous déclarez ce composant : ``` js Vue.component('my-component', { @@ -125,35 +125,35 @@ Vue.component('my-component', { }) ``` -Then add some classes when using it: +​Puis ajoutez quelques classes quand vous l'utilisez : ``` html ``` -The rendered HTML will be: +Le rendu HTML sera : ``` html

Hi

``` -The same is true for class bindings: +C'est aussi vrai pour la liaison de classe : ``` html ``` -When `isActive` is truthy, the rendered HTML will be: +Quand `isActive` est vrai, le rendu HTML sera : ``` html

``` -## Binding Inline Styles +## Lier l'attribut "style" -### Object Syntax +### Syntaxe objet -The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names: +La syntaxe objet pour `v-bind:style` est assez simple - cela ressemble presque à CSS, sauf que c'est un objet Javascript. Vous pouvez utiliser camelCase ou kebab-case (utilisez des apostrophes avec kebab-case) pour les noms des propriétés CSS : ``` html
@@ -165,7 +165,7 @@ data: { } ``` -It is often a good idea to bind to a style object directly so that the template is cleaner: +C'est souvent une bonne idée de lier directement à un objet de style, pour que le template soit plus propre : ``` html
@@ -179,16 +179,16 @@ data: { } ``` -Again, the object syntax is often used in conjunction with computed properties that return objects. +Encore une fois, la syntaxe objet est souvent utilisé en conjonction avec des propriétés calculés retournant des objets. -### Array Syntax +### Syntaxe tableau -The array syntax for `v-bind:style` allows you to apply multiple style objects to the same element: +La syntaxe tableau pour `v-bind:style` permet d'appliquer plusieurs objets de style à un même élément. ``` html
``` -### Auto-prefixing +### Préfixage automatique -When you use a CSS property that requires vendor prefixes in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles. +Quand vous utilisez une propriété CSS qui nécessite un préfixe vendeur dans `v-bind:style`, par exemple `transform`, Vue le détectera automatiquement, et ajoutera les préfixes appropriés aux styles appliqués. \ No newline at end of file From cba7760a223eb4ea17474253ad2683491437acf8 Mon Sep 17 00:00:00 2001 From: Bastien Saro Chassetuillier Date: Thu, 12 Jan 2017 13:40:28 +0100 Subject: [PATCH 2/7] Corrections Review class-and-style.md --- src/v2/guide/class-and-style.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index 41ef921faa..8d0027be49 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -4,9 +4,9 @@ type: guide order: 6 --- -Un besoin classique de la **liaison de données**, est de manipuler la *liste des classes* et le *style* d'un élément. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il est seulement nécessaire de générer une chaîne de caractère avec notre expression. Cependant, jouer avec des concaténations de chaîne de caractères est ennuyant, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux. +Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses style en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant, jouer avec des concaténations de chaîne de caractères est fastidieux, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux. -## Lier l'attribut "class" +## Liaison de Classes HTML ### Syntaxe Objet @@ -16,7 +16,7 @@ Il est possible de donner un objet à `v-bind:class` pour permuter les classes a
``` -La syntaxe ci-dessus signifie que la présence de la classe `active` sera déterminé par la [véracité](https://developer.mozilla.org/fr/docs/Glossaire/Truthy) de la propriété `isActive`. +La syntaxe ci-dessus signifie que la classe `active` sera présente si la propriété `isActive` est [évaluée à vrai](https://developer.mozilla.org/fr/docs/Glossaire/Truthy). Vous pouvez permuter plusieurs classes en ayant plus de champs dans l'objet. De plus, la directive `v-bind:class` peut aussi coexister avec l'attribut `class`. Donc, avec le template suivant : @@ -143,17 +143,17 @@ C'est aussi vrai pour la liaison de classe : ``` -Quand `isActive` est vrai, le rendu HTML sera : +Quand `isActive` est évalué à vrai, le rendu HTML sera : ``` html

``` -## Lier l'attribut "style" +## Liaison de Styles HTML ### Syntaxe objet -La syntaxe objet pour `v-bind:style` est assez simple - cela ressemble presque à CSS, sauf que c'est un objet Javascript. Vous pouvez utiliser camelCase ou kebab-case (utilisez des apostrophes avec kebab-case) pour les noms des propriétés CSS : +La syntaxe objet pour `v-bind:style` est assez simple - cela ressemble presque à CSS, sauf que c'est un objet JavaScript. Vous pouvez utiliser camelCase ou kebab-case (utilisez des apostrophes avec kebab-case) pour les noms des propriétés CSS : ``` html
@@ -165,7 +165,7 @@ data: { } ``` -C'est souvent une bonne idée de lier directement à un objet de style, pour que le template soit plus propre : +C'est souvent une bonne idée de lier directement un objet de style, pour que le template soit plus propre : ``` html
@@ -179,7 +179,7 @@ data: { } ``` -Encore une fois, la syntaxe objet est souvent utilisé en conjonction avec des propriétés calculés retournant des objets. +Encore une fois, la syntaxe objet est souvent utilisée en conjonction avec des propriétées calculées retournant des objets. ### Syntaxe tableau From 5d7be4b36143fa4330fdd3dcca0f1aff51480c6e Mon Sep 17 00:00:00 2001 From: Bastien Saro Chassetuillier Date: Thu, 12 Jan 2017 14:04:21 +0100 Subject: [PATCH 3/7] Corrections Review class-and-style.md --- src/v2/guide/class-and-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index 8d0027be49..342b15ab45 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -4,7 +4,7 @@ type: guide order: 6 --- -Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses style en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant, jouer avec des concaténations de chaîne de caractères est fastidieux, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux. +Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses styles en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant, jouer avec des concaténations de chaîne de caractères est fastidieux, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux. ## Liaison de Classes HTML From d1f172a42c554cfb7dc1a30379477d625c04da2a Mon Sep 17 00:00:00 2001 From: Bastien Saro Chassetuillier Date: Thu, 12 Jan 2017 22:24:00 +0100 Subject: [PATCH 4/7] Corrections Review class-and-style.md --- src/v2/guide/class-and-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index 342b15ab45..aef419c831 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -43,7 +43,7 @@ Le rendu sera : Quand `isActive` ou `hasError` change, la liste des classes sera mise à jour en conséquence. Par exemple, si `hasError` devient `true`, la liste des classes deviendra `"static active text-danger"`. -L'objet lié n'as pas besoin d'être en ligne : +L'objet lié n'a pas besoin d'être dans l'attribut : ``` html
From 2ad6ba42617b868e9c8e36cd46d56911d9b1a933 Mon Sep 17 00:00:00 2001 From: Bastien Saro Chassetuillier Date: Fri, 13 Jan 2017 23:47:37 +0100 Subject: [PATCH 5/7] Corrections Review class-and-style.md --- src/v2/guide/class-and-style.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index aef419c831..c07722614f 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -1,16 +1,16 @@ --- -title: Liaisons de Class et Style +title: Liaisons de classes et de Styles type: guide order: 6 --- -Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses styles en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant, jouer avec des concaténations de chaîne de caractères est fastidieux, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux. +Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses styles en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant la concaténations de chaîne de caractères est fastidieuse, et source d'erreur. Pour cette raison, Vue fournit des améliorations spécifiques quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux. ## Liaison de Classes HTML ### Syntaxe Objet -Il est possible de donner un objet à `v-bind:class` pour permuter les classes automatiquement : +Il est possible de passer un objet à `v-bind:class` pour permuter les classes automatiquement : ``` html
@@ -57,7 +57,7 @@ data: { } ``` -Ceci rendra le même résultat. Il est également possible de lier une [propriétés calculées](computed.html) qui retourne un objet. C'est une méthode commune et puissante : +Ceci rendra le même résultat. Il est également possible de lier une [propriétés calculées](computed.html) qui retourne un objet. C'est une méthode courante et puissante : ``` html
@@ -79,7 +79,7 @@ computed: { ### Syntaxe Tableau -Il est possible de donner un tableau à `v-bind:class` pour appliquer une liste de classe : +Il est possible de passer un tableau à `v-bind:class` pour appliquer une liste de classe : ``` html
From 5b87ad4c038620768ee7ae838b85af6bd2d2f4e9 Mon Sep 17 00:00:00 2001 From: Bastien Saro Chassetuillier Date: Fri, 13 Jan 2017 23:48:32 +0100 Subject: [PATCH 6/7] Corrections Review class-and-style.md --- src/v2/guide/class-and-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index c07722614f..1c26da8ce6 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -43,7 +43,7 @@ Le rendu sera : Quand `isActive` ou `hasError` change, la liste des classes sera mise à jour en conséquence. Par exemple, si `hasError` devient `true`, la liste des classes deviendra `"static active text-danger"`. -L'objet lié n'a pas besoin d'être dans l'attribut : +L'objet lié n'a pas besoin d'être déclaré dans l'attribut : ``` html
From 6cd018129bb6f1008fa38a25d367d43423a2a83b Mon Sep 17 00:00:00 2001 From: Bastien Saro Chassetuillier Date: Fri, 13 Jan 2017 23:57:44 +0100 Subject: [PATCH 7/7] Corrections Review class-and-style.md --- src/v2/guide/class-and-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index 1c26da8ce6..7ee17b4f38 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -1,5 +1,5 @@ --- -title: Liaisons de classes et de Styles +title: Liaisons de classes et de styles type: guide order: 6 ---