Skip to content

Commit cbf64e4

Browse files
DaedalusDevMachinisteWeb
DaedalusDev
authored and
MachinisteWeb
committed
Traduction de components-slots.md (#158)
* Traduction components-slots * - Correction des "" avec des «» - Alignement sur la documentation officielle de vue.org * - Traduction creating-custom-scroll-directives 2ème relecture * - Traduction creating-custom-scroll-directives 2ème relecture * - Traduction components-slots 3ème relecture * - Traduction components-slots Revert some changes
1 parent 0d34477 commit cbf64e4

File tree

1 file changed

+64
-65
lines changed

1 file changed

+64
-65
lines changed

‎src/v2/guide/components-slots.md

Lines changed: 64 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
---
2-
title: Slots (EN)
2+
title: Slots
33
type: guide
44
order: 104
55
---
66

7-
> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
7+
> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
88
9-
## Slot Content
9+
## Les « Slot content » ou « Contenu de slot »
1010

11-
<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Vue implements a content distribution API that's modeled after the current [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the `<slot>` element to serve as distribution outlets for content.</p>
12-
13-
This allows you to compose components like this:
11+
Vue implémente une API de distribution de contenu inspirée du [Brouillon de spécification des WebComponents](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) utilisant l'élément `<slot>` comme zone de distribution de contenu.
1412

13+
Cela vous permet de composer vos composants ainsi :
1514
``` html
1615
<navigation-link url="/profile">
17-
Your Profile
16+
Mon profil
1817
</navigation-link>
1918
```
2019

21-
Then in the template for `<navigation-link>`, you might have:
20+
Dans le template `<navigation-link>`, nous aurons :
2221

2322
``` html
2423
<a
@@ -29,47 +28,47 @@ Then in the template for `<navigation-link>`, you might have:
2928
</a>
3029
```
3130

32-
When the component renders, the `<slot>` element will be replaced by "Your Profile". Slots can contain any template code, including HTML:
31+
Lors du cycle de rendu du composant, l'élément `<slot>` est remplacé par « Mon profil ». Les éléments `<slot>` peuvent contenir n'importe quel code de template, incluant le HTML :
3332

3433
``` html
3534
<navigation-link url="/profile">
36-
<!-- Add a Font Awesome icon -->
35+
<!-- Mon icône -->
3736
<span class="fa fa-user"></span>
38-
Your Profile
37+
Mon profil
3938
</navigation-link>
4039
```
4140

42-
Or even other components:
41+
Ou encore faire appel à d'autres composants :
4342

4443
``` html
4544
<navigation-link url="/profile">
46-
<!-- Use a component to add an icon -->
45+
<!-- Utilisation d'un composant dédié à l'ajout d'une icône -->
4746
<font-awesome-icon name="user"></font-awesome-icon>
48-
Your Profile
47+
Mon profil
4948
</navigation-link>
5049
```
5150

52-
If `<navigation-link>` did **not** contain a `<slot>` element, any content passed to it would simply be discarded.
51+
Si `<navigation-link>` ne contient **pas** d'élément `<slot>`, le contenu enfant sera simplement ignoré.
5352

54-
## Named Slots
53+
## Les Slots nommés
5554

56-
There are times when it's useful to have multiple slots. For example, in a hypothetical `base-layout` component with the following template:
55+
Dans certains cas, il peut être intéressant d'avoir plusieurs éléments `<slot>`. Dans un exemple hypothétique, voici le template d'un composant `<base-layout>`:
5756

5857
``` html
5958
<div class="container">
6059
<header>
61-
<!-- We want header content here -->
60+
<!-- Ici le contenu de l'entête -->
6261
</header>
6362
<main>
64-
<!-- We want main content here -->
63+
<!-- Ici le contenu courant -->
6564
</main>
6665
<footer>
67-
<!-- We want footer content here -->
66+
<!-- Ici le pied de page -->
6867
</footer>
6968
</div>
7069
```
7170

72-
For these cases, the `<slot>` element has a special attribute, `name`, which can be used to define additional slots:
71+
Dans le cas suivant, l'élément `<slot>` à un l'attribut spécial `name` , qui peut être utilisé pour désigner des slots additionnels :
7372

7473
``` html
7574
<div class="container">
@@ -85,86 +84,86 @@ For these cases, the `<slot>` element has a special attribute, `name`, which can
8584
</div>
8685
```
8786

88-
To provide content to named slots, we can use the `slot` attribute on a `<template>` element in the parent:
87+
Afin de distribuer le contenu dans les éléments `<slot>` appropriés, il suffit d'utiliser l'attribut réservé `slot` sur un élément `<template>` du composant parent :
8988

9089
```html
9190
<base-layout>
9291
<template slot="header">
93-
<h1>Here might be a page title</h1>
92+
<h1>Le titre de ma page</h1>
9493
</template>
9594

96-
<p>A paragraph for the main content.</p>
97-
<p>And another one.</p>
95+
<p>Un paragraphe pour le slot par défaut.</p>
96+
<p>Un autre paragraphe.</p>
9897

9998
<template slot="footer">
100-
<p>Here's some contact info</p>
99+
<p>Ici les infos de contact</p>
101100
</template>
102101
</base-layout>
103102
```
104103

105-
Or, the `slot` attribute can also be used directly on a normal element:
104+
Ou utiliser l'attribut `slot` directement sur un élément normal:
106105

107106
``` html
108107
<base-layout>
109-
<h1 slot="header">Here might be a page title</h1>
108+
<h1 slot="header">Le titre de ma page</h1>
110109

111-
<p>A paragraph for the main content.</p>
112-
<p>And another one.</p>
110+
<p>Un paragraphe pour le slot par défaut.</p>
111+
<p>Un autre paragraphe.</p>
113112

114-
<p slot="footer">Here's some contact info</p>
113+
<p slot="footer">Ici les infos de contact</p>
115114
</base-layout>
116115
```
117116

118-
There can still be one unnamed slot, which is the **default slot** that serves as a catch-all outlet for any unmatched content. In both examples above, the rendered HTML would be:
117+
Il ne peut y avoir qu'un seul **slot par défaut** qui recevra tous les éléments qui ne correspondent à aucun des slots nommés. Dans l'exemple précédent, le rendu HTML produit sera :
119118

120119
``` html
121120
<div class="container">
122121
<header>
123-
<h1>Here might be a page title</h1>
122+
<h1>Le titre de ma page</h1>
124123
</header>
125124
<main>
126-
<p>A paragraph for the main content.</p>
127-
<p>And another one.</p>
125+
<p>Un paragraphe pour le slot par défaut.</p>
126+
<p>Un autre paragraphe.</p>
128127
</main>
129128
<footer>
130-
<p>Here's some contact info</p>
129+
<p>Ici les infos de contact</p>
131130
</footer>
132131
</div>
133132
```
134133

135-
## Default Slot Content
134+
## Les slots avec contenu par défaut
136135

137-
There are cases when it's useful to provide a slot with default content. For example, a `<submit-button>` component might want the content of the button to be "Submit" by default, but also allow users to override with "Save", "Upload", or anything else.
136+
Dans certains cas, il peut être intéressant de fournir un contenu par défaut pour vos slots. Par exemple, qu'un composant `<submit-button>` contienne le texte 'Envoyer' par défaut et que ce contenu soit facilement modifié par 'Sauvegarder', 'Télécharger', ou autre.
138137

139-
To achieve this, specify the default content in between the `<slot>` tags.
138+
Pour procéder de la sorte, il est possible de spécifier le contenu par défaut d'une balise `<slot>`.
140139

141140
```html
142141
<button type="submit">
143-
<slot>Submit</slot>
142+
<slot>Envoyer</slot>
144143
</button>
145144
```
146145

147-
If the slot is provided content by the parent, it will replace the default content.
146+
Si le `<slot>` est rempli dans le composant parent, le contenu par défaut est remplacé.
148147

149-
## Compilation Scope
148+
## Scope de compilation du template
150149

151-
When you want to use data inside a slot, such as in:
150+
Quand on utilise des données dans le slot, comme dans l'exemple suivant :
152151

153152
``` html
154153
<navigation-link url="/profile">
155-
Logged in as {{ user.name }}
154+
Connecté en tant que {{ user.name }}
156155
</navigation-link>
157156
```
158157

159-
That slot has access to the same instance properties (i.e. the same "scope") as the rest of the template. The slot does **not** have access to `<navigation-link>`'s scope. For example, trying to access `url` would not work. As a rule, remember that:
158+
Le `<slot>` bénéficie des mêmes propriétés d'instance (même « scope » ou « contexte ») que le reste du template parent. Le `<slot>` **ne** bénéficie en aucun cas des éléments du « scope » de l'instance de `<navigation-link>`. Par exemple, tenter d'accéder à la props `url` ne fonctionnera pas. À titre de règle générale, souvenez-vous que :
160159

161-
> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
160+
> Tout ce qui est dans le `<template>` parent est compilé dans le contexte parent. Tout ce qui est dans le `<template>` enfant est compilé dans le contexte enfant.
162161
163-
## Scoped Slots
162+
## Les slots scopés (ou slots avec accès au scope enfant)
164163

165-
> New in 2.1.0+
164+
> Nouveauté en 2.1.0+
166165
167-
Sometimes you'll want to provide a component with a reusable slot that can access data from the child component. For example, a simple `<todo-list>` component may contain the following in its template:
166+
Dans certains cas, il peut être intéressant lors de l'utilisation d'un composant avec éléments `<slot>` réutilisables, d'accéder aux données du composant enfant. Voici l'exemple d'un composant `<todo-list>` dont le `<template>` est :
168167

169168
```html
170169
<ul>
@@ -177,45 +176,45 @@ Sometimes you'll want to provide a component with a reusable slot that can acces
177176
</ul>
178177
```
179178

180-
But in some parts of our app, we want the individual todo items to render something different than just the `todo.text`. This is where scoped slots come in.
179+
Dans certaines parties de l'application, il serait intéressant de personnaliser le rendu pour chaque élément de la liste, plutôt que d'afficher seulement `todo.text`. C'est possible avec les slots scopés.
181180

182-
To make the feature possible, all we have to do is wrap the todo item content in a `<slot>` element, then pass the slot any data relevant to its context: in this case, the `todo` object:
181+
Pour utiliser cette fonctionnalité, nous allons englober le contenu des todos dans un élément `<slot>`, et lui fournir des données appartenant/pertinentes à son contexte : dans notre cas, l'objet `todo`) :
183182

184183
```html
185184
<ul>
186185
<li
187186
v-for="todo in todos"
188187
v-bind:key="todo.id"
189188
>
190-
<!-- We have a slot for each todo, passing it the -->
191-
<!-- `todo` object as a slot prop. -->
189+
<!-- Un slot est créé pour chaque élément de "todos" -->
190+
<!-- Chaque objet `todo` va bénéficier d'un "slot prop" -->
192191
<slot v-bind:todo="todo">
193-
<!-- Fallback content -->
192+
<!-- Ici le contenu par défaut du slot -->
194193
{{ todo.text }}
195194
</slot>
196195
</li>
197196
</ul>
198197
```
199198

200-
Now when we use the `<todo-list>` component, we can optionally define an alternative `<template>` for todo items, but with access to data from the child via the `slot-scope` attribute:
199+
Lorsqu'on utilise le composant `<todo-list>`, il devient alors possible de fournir de façon optionnelle un `<template>` alternatif de rendu des éléments de la liste, et d'accéder aux données du `slot` enfant avec l'attribut `slot-scope` :
201200

202201
```html
203202
<todo-list v-bind:todos="todos">
204-
<!-- Define `slotProps` as the name of our slot scope -->
205-
<template slot-scope="slotProps">
206-
<!-- Define a custom template for todo items, using -->
207-
<!-- `slotProps` to customize each todo. -->
208-
<span v-if="slotProps.todo.isComplete">✓</span>
209-
{{ slotProps.todo.text }}
203+
<!-- Définir `slotProps` pour assigner les données du slot dans une variable -->
204+
<template slot-scope="lesPropsDuSlot">
205+
<!-- Ici, nous allons personnaliser le rendu du slot -->
206+
<!-- `lesPropsDuSlot` contiendra les props fournies par v-bind dans le slot enfant -->
207+
<span v-if="lesPropsDuSlot.todo.isComplete">✓</span>
208+
{{ lesPropsDuSlot.todo.text }}
210209
</template>
211210
</todo-list>
212211
```
213212

214-
> In 2.5.0+, `slot-scope` is no longer limited to the `<template>` element, but can instead be used on any element or component in the slot.
213+
> Dans 2.5.0+, `slot-scope` n'est plus limité aux éléments `<template>` et peut être utilisé sur n'importe quel élément ou composant (`<div>`, `<my-component>`, ...)
215214
216-
### Destructuring `slot-scope`
215+
### Affectation par décomposition du `slot-scope`
217216

218-
The value of `slot-scope` can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. This means in supported environments ([single-file components](single-file-components.html) or [modern browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Browser_compatibility)) you can also use [ES2015 destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) in the expression, like so:
217+
La valeur de l'attribut `slot-scope` peut actuellement recevoir une expression JavaScript valide qui pourrait apparaitre en argument de définition d'une fonction. Attention cependant, cette fonctionnalité est soumise à l'utilisation des environnements suivants : [Composants monofichiers](single-file-components.html) ou [Navigateurs modernes](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition#Compatibilité_des_navigateurs) vous pouvez alors utiliser [Affecter par décomposition (ES2015)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition) dans l'expression, de cette manière :
219218

220219
```html
221220
<todo-list v-bind:todos="todos">
@@ -226,4 +225,4 @@ The value of `slot-scope` can actually accept any valid JavaScript expression th
226225
</todo-list>
227226
```
228227

229-
This is a great way to make scoped slots a little cleaner.
228+
Cela peut être pratique pour rendre vos slot scopés un peu plus lisibles.

0 commit comments

Comments
 (0)