traduction de class-and-style.md #15

Teraglehn · 2017-01-11T13:54:08Z

No description provided.

yann-yinn · 2017-01-12T10:07:32Z

src/v2/guide/class-and-style.md

 type: guide
 order: 6
 ---

-<p class="tip">**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).**</p>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.


propositions:
nous devons simplement de générer une chaîne de caractères au lieu de Il est seulement nécessaire
"fastidieux" à la place "d'ennuyant"

À faire :

Pas de gras pour liaison de données

Pas d'italique pour liste des classes et style

Pas de virgule après liaison de données

nos expressions

Discussion :

fastidieux pour ennuyant également pour moi.

le terme « inline » pour « style en ligne » est passé à la trappe. Je propose de transformer

Un besoin classique de la liaison de données, est de manipuler la liste des classes et le style d'un élément

en

Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément ainsi (que les styles de son attribut|ses styles en ligne).

On peut garder « styles en ligne » qui est une traduction de inline styles mais je trouve que ça retranscrit pas le fait que ce soit dans l'attribut. Un expemple plus flagrant plus loin quand on explique que l'objet n'a pas besoin d'être écrite dans l'attribut.

"manipuler la liste des classes et les style en lignes d'un élément" me semble conforme au texte original et compréhensible. En anglais , on dit "inlines style", définit ici "An inline style may be used to apply a unique style for a single element." : http://www.w3schools.com/css/css_howto.asp

MachinisteWeb

Merci pour cette traduction !

Mes retours ;)

MachinisteWeb · 2017-01-12T11:00:04Z

src/v2/guide/class-and-style.md

 type: guide
 order: 6
 ---

-<p class="tip">**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).**</p>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.


À faire :

Pas de gras pour liaison de données

Pas d'italique pour liste des classes et style

Pas de virgule après liaison de données

nos expressions

Discussion :

fastidieux pour ennuyant également pour moi.

le terme « inline » pour « style en ligne » est passé à la trappe. Je propose de transformer

Un besoin classique de la liaison de données, est de manipuler la liste des classes et le style d'un élément

en

Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément ainsi (que les styles de son attribut|ses styles en ligne).

On peut garder « styles en ligne » qui est une traduction de inline styles mais je trouve que ça retranscrit pas le fait que ce soit dans l'attribut. Un expemple plus flagrant plus loin quand on explique que l'objet n'a pas besoin d'être écrite dans l'attribut.

MachinisteWeb · 2017-01-12T11:03:43Z

src/v2/guide/class-and-style.md


-## Binding HTML Classes
+## Lier l'attribut "class"


Discussion :

Je mettrai « Liaison de Classes HTML ».
J'ai compris que cette traduction était pour la consistance avec « Inline Style » plus bas, mais on peut faire la consistence à l'envers ce qui donnerai « Liaison de Styles HTML » pour la suite.

MachinisteWeb · 2017-01-12T11:17:55Z

src/v2/guide/class-and-style.md


 ``` html
 <div v-bind:class="{ active: isActive }"></div>
 ```

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


Discussion :

Ici « truhthiness » signifie « le fait que la valeur soit évalué à true », qu'elle soit « truthy » par opposition à « falsy ». Je pense qu'il faut changer la phrase pour inclure cette dimension. Véracité ça me parle pas vraiment. Genre

La syntaxe ci-dessus signifie que la classe active sera présente si la valeur de la propriété isActive est évaluée à vrai.

MachinisteWeb · 2017-01-12T11:20:52Z

src/v2/guide/class-and-style.md


-The bound object doesn't have to be inline:
+L'objet lié n'as pas besoin d'être en ligne :


Discussion :

Si on garde le terme « en ligne » ici, il faut le remettre dans le premier paragraphe de ce document quand on parlait de « styles » plutôt que de « styles en ligne ».

Si on ne conserve pas « styles en ligne » il faudrait plutôt préciser :

L'objet lié n'a pas besoin d'être dans l'attribut :

A vrai dire,

L'objet lié n'as pas besoin d'être en ligne

Ne me parait pas satisfaisant non plus, je serais plus partisan du :

L'objet lié n'a pas besoin d'être dans l'attribut :

Même en gardant les "styles en ligne" dans le premier paragraphe

Moi je mettrais "L'objet lié n'a pas besoin d'être déclaré en ligne dans l'attribut class" :-p

@nyl-auster : ça me plait bien, c'est assez complet et explicite, on suit pas la traduction au mots mais bon.

Pour ma part « en ligne dans l'attribut » n'a pas plus de sens que « dans l'attribut ». C'est comme « conduire sa voiture avec le volant jusqu'à destination » c'est pareil que « conduire sa voiture jusqu'à destination ». Donc je maintiendrais :

L'objet lié n'a pas besoin d'être dans l'attribut :

Simplement.

MachinisteWeb · 2017-01-12T11:43:21Z

src/v2/guide/class-and-style.md


 ``` html
 <my-component v-bind:class="{ active: isActive }"></my-component>
 ```

-When `isActive` is truthy, the rendered HTML will be:
+Quand `isActive` est vrai, le rendu HTML sera :


Discussion :

Je traduirai true par vrai et truthy par évalué à vrai

MachinisteWeb · 2017-01-12T11:46:49Z

src/v2/guide/class-and-style.md


 ``` html
 <p class="foo bar active"></p>
 ```

-## Binding Inline Styles
+## Lier l'attribut "style"


Discussion :

On pourrait également traduire par

« Liaison de Styles HTML » par concordance avec « Liaison de Classes HTML » pour encore une fois se débarrasser du Inline gênant.

MachinisteWeb · 2017-01-12T11:47:59Z

src/v2/guide/class-and-style.md


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


À faire :

JavaScript

MachinisteWeb · 2017-01-12T11:49:14Z

src/v2/guide/class-and-style.md

@@ -179,16 +179,16 @@ data: {
 }
 ```

-Again, the object syntax is often used in conjunction with computed properties that return objects.


Discussion :

Retirer le à et ne pas tenir compte de to car en français, avec le à on a tendence à ce demander « lier quoi à ça » ce qui fait que du coup la phrase manque d'un sujet (le contenu de v-bind en l'occurence).

C'est souvent une bonne idée de lier directement à un objet de style, pour que le template soit plus propre

On peut aussi rajouter le sujet mais ça me plait moins car là on « invente » du texte (même si on garde le sens)

C'est souvent une bonne idée de lier v-bind:style directement à un objet de style, pour que le template soit plus propre

Suggestion mineure (tu peux la sauter); je met plutôt "plus lisible" que "plus propre" qui me semble plus précis (propre relève plus pour moi du jugement ou de la qualité de sol de ma salle de bain le dimanche, tandis que lisible indique le fait que le template est plus facile à comprendre et à saisir). Propre n'est l'équivalent exact de "clean" dans le cadre des idées et des concepts. (y'a un peu l'idée de clarté et de pureté dedans également)

J'aime pas trop le terme "lisible" pour traduire "clean", même si c'est une partie de ce qui est dit, je trouve que "propre" porte plus la notion de pureté et d'élégance de code que "lisible" ("élégant" pourrais faire une bonne traduction mais je trouve ça un peu pompeux)
Je trouve que "propre" est un bon compromis :)

MachinisteWeb · 2017-01-12T11:55:10Z

src/v2/guide/class-and-style.md

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


À faire :

souvent utilisée

propriétés calculées

Teraglehn · 2017-01-12T12:47:30Z

Merci pour la review :)

J'ai intégré la plupart des modifs, puisqu'elles étaient toutes sensés.

Il y a juste le cas où j'ai répondu en commentaire, ou je n'arrive pas à trouver quelque chose de très satisfaisant.

MachinisteWeb · 2017-01-12T12:57:45Z

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.


ses styles en ligne

yann-yinn · 2017-01-13T09:08:28Z

src/v2/guide/class-and-style.md

@@ -1,32 +1,32 @@
 ---
-title: Class and Style Bindings
+title: Liaisons de Class et Style


En français : Liaisons de classes et de styles

yann-yinn · 2017-01-13T09:20:30Z

src/v2/guide/class-and-style.md

 type: guide
 order: 6
 ---

-<p class="tip">**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).**</p>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 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.


suggestion mineure "jouer avec des concaténations" > jouer ne correspond pas au sens de meddling (d'après mon dico c'est plutôt "tremper dans", "être mélé à" ou "impliqué dans"), . J'irais au plus court
"Cependant la concaténation de chaînes de caractères est fastidieuse et source d'erreur"

yann-yinn · 2017-01-13T09:24:46Z

src/v2/guide/class-and-style.md

 type: guide
 order: 6
 ---

-<p class="tip">**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).**</p>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 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.


"fournir des améliorations spéciales" sonne bizarre en français, un peu trop littéral à mon sens.
"Spécifiques" me semble plus proche du sens initial dans ce cas précis. J'écrirais plutôt:
"Vue apporte des améliorations spécifiques quand ..."

yann-yinn · 2017-01-13T09:28:18Z

src/v2/guide/class-and-style.md


-The bound object doesn't have to be inline:
+L'objet lié n'a pas besoin d'être dans l'attribut :


L'objet lié n'a pas besoin d'être crée dans l'attribut
Par ce que l'exemple qui suit semble contredire la phrase : l'objet lié est bien dans l'attribut ( mais crée ailleurs)

J'utiliserais plutôt le terme "déclaré" du coup

yann-yinn · 2017-01-13T09:29:50Z

src/v2/guide/class-and-style.md

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


je mettrais "courante" à la place de "commune" puisque commun en français est plus souvent utilisé dans le sens "mettre en commun" que "truc qu'on fait souvent"

yann-yinn · 2017-01-13T09:31:57Z

src/v2/guide/class-and-style.md


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


On parle plutôt de "passer des paramètres" que de les donner.

yann-yinn · 2017-01-13T09:32:43Z

src/v2/guide/class-and-style.md


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


passer un objet plutôt que donner (on dit le plus souvent "passer des paramètres" , comme "passer un paramètre dans une url, passer un paramètre à une fonction")

yann-yinn · 2017-01-13T09:47:51Z

src/v2/guide/class-and-style.md

@@ -179,16 +179,16 @@ data: {
 }
 ```

-Again, the object syntax is often used in conjunction with computed properties that return objects.


Suggestion mineure (tu peux la sauter); je met plutôt "plus lisible" que "plus propre" qui me semble plus précis (propre relève plus pour moi du jugement ou de la qualité de sol de ma salle de bain le dimanche, tandis que lisible indique le fait que le template est plus facile à comprendre et à saisir). Propre n'est l'équivalent exact de "clean" dans le cadre des idées et des concepts. (y'a un peu l'idée de clarté et de pureté dedans également)

Teraglehn · 2017-01-13T22:56:25Z

Merci pour les review, je pense avoir fait le tour :)

yann-yinn · 2017-01-13T23:34:05Z

Bon évidemment c'est quand j'appuie sur le bouton "merge" que les fautes me sautent aux yeux

Un S en trop ici :

La concaténations

Les S en trop ici :

". Il est également possible de lier une propriétés calculées qui retourne un objet. "

manque un S :

une liste de classe

sylvainpolletvillard · 2017-01-29T13:16:32Z

tu crées une autre PR pour corriger ces fautes ?

yann-yinn · 2017-01-29T19:29:37Z

@Teraglehn l'a déjà fait et c'est mergé : #17

traduction de class-and-style.md

1b3fcd1

yann-yinn requested review from yann-yinn and MachinisteWeb January 11, 2017 14:33

yann-yinn assigned Teraglehn Jan 11, 2017

yann-yinn requested a review from sylvainpolletvillard January 12, 2017 09:58

yann-yinn reviewed Jan 12, 2017

View reviewed changes

MachinisteWeb requested changes Jan 12, 2017

View reviewed changes

MachinisteWeb mentioned this pull request Jan 12, 2017

Pages en cours de traduction #3

Open

Corrections Review class-and-style.md

cba7760

MachinisteWeb requested changes Jan 12, 2017

View reviewed changes

Teraglehn added 2 commits January 12, 2017 14:04

Corrections Review class-and-style.md

5d7be4b

Corrections Review class-and-style.md

d1f172a

MachinisteWeb approved these changes Jan 13, 2017

View reviewed changes

yann-yinn suggested changes Jan 13, 2017

View reviewed changes

yann-yinn removed the request for review from sylvainpolletvillard January 13, 2017 09:48

Teraglehn added 2 commits January 13, 2017 23:47

Corrections Review class-and-style.md

2ad6ba4

Corrections Review class-and-style.md

5b87ad4

Corrections Review class-and-style.md

6cd0181

yann-yinn approved these changes Jan 13, 2017

View reviewed changes

yann-yinn merged commit b699ca9 into vuejs-fr:master Jan 13, 2017


		The bound object doesn't have to be inline:
		L'objet lié n'as pas besoin d'être en ligne :


		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 :


		The bound object doesn't have to be inline:
		L'objet lié n'a pas besoin d'être dans l'attribut :


		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 :


		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 :

traduction de class-and-style.md #15

traduction de class-and-style.md #15

Conversation

Teraglehn commented Jan 11, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb Jan 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yann-yinn Jan 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb Jan 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb Jan 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Teraglehn commented Jan 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yann-yinn Jan 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yann-yinn Jan 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Teraglehn commented Jan 13, 2017

yann-yinn commented Jan 13, 2017

sylvainpolletvillard commented Jan 29, 2017

yann-yinn commented Jan 29, 2017

MachinisteWeb Jan 12, 2017 •

edited

Loading

yann-yinn Jan 12, 2017 •

edited

Loading

MachinisteWeb Jan 12, 2017 •

edited

Loading

MachinisteWeb Jan 12, 2017 •

edited

Loading

Teraglehn commented Jan 12, 2017 •

edited

Loading

yann-yinn Jan 13, 2017 •

edited

Loading

yann-yinn Jan 13, 2017 •

edited

Loading