msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

docs: chapter 2 continued (#18)

Browse Source 
* docs: chapter 2 continued

* docs: ignore ts errors

* docs: fix links

---------

Co-authored-by: Romain Crestey <romain.crestey@radiofrance.com>
pull/9156/head
Romain l'Ourson 3 years ago committed by Romain Crestey
parent 326f81cc2b
commit 39a9d42a96
6 changed files with 401 additions and 371 deletions
Show Stats Download Patch File Download Diff File

4
documentation/docs/02-template-syntax/02-basic-markup.md
Unescape View File

@ -45,9 +45,9 @@ Ou elles peuvent _être définies_ par des expressions JavaScript.
<button disabled={!clickable}>...</button> <button disabled={!clickable}>...</button>
``` ```
Les attributs booléens sont inclus sur l'élément si leur valeur est [truthy](https://developer.mozilla.org/fr/docs/Glossary/Truthy) et exclus si leur valeur est [falsy](https://developer.mozilla.org/fr/docs/Glossary/Falsy). Les attributs booléens sont inclus sur l'élément si leur valeur est <span class="vo">[truthy](/docs/javascript#falsy-truthy-truthy)</span> et exclus si leur valeur est <span class="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>.
Tous les autres attributs sont inclus à moins que leur valeur soit [nullish](https://developer.mozilla.org/fr/docs/Glossary/Nullish) (`null` ou `undefined`). Tous les autres attributs sont inclus à moins que leur valeur soit <span class="vo">[nullish](/docs/javascript#nullish)</span>.
```svelte ```svelte
<input required={false} placeholder="Ce champ input n'est pas requis" /> <input required={false} placeholder="Ce champ input n'est pas requis" />

23
documentation/docs/02-template-syntax/04-special-tags.md
Unescape View File

@ -1,5 +1,5 @@
--- ---
title: Special tags title: Balises spéciales
--- ---
## {@html ...} ## {@html ...}
@ -8,11 +8,11 @@ title: Special tags
{@html expression} {@html expression}
``` ```
In a text expression, characters like `<` and `>` are escaped; however, with HTML expressions, they're not. Dans une expression texte, les caractères `<` et `>` sont échappés ; ils ne sont en revanche pas échappés dans une expression HTML.
The expression should be valid standalone HTML — `{@html "<div>"}content{@html "</div>"}` will _not_ work, because `</div>` is not valid HTML. It also will _not_ compile Svelte code. L'expression doit être du HTML valide en soi — `{@html "<div>"}contenu{@html "</div>"}` ne fonctionnera _pas_, car `</div>` n'est pas du HTML valide. Dans ce cas, Svelte ne réussira _pas_ à compiler.
> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability. > Svelte ne nettoie pas les expressions avant d'injecter le HTML. Si la donnée provient d'une source non sûre, vous devez le nettoyer vous-même pour éviter d'exposer vos utilisateurs à des vulnérabilités de type <span class="vo">[XSS](/docs/web#xss)</span>.
```svelte ```svelte
<div class="blog-post"> <div class="blog-post">
@ -26,12 +26,11 @@ The expression should be valid standalone HTML — `{@html "<div>"}content{@html
```svelte ```svelte
{@debug} {@debug}
``` ```
```svelte ```svelte
{@debug var1, var2, ..., varN} {@debug var1, var2, ..., varN}
``` ```
The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open. La balise `{@debug ...}` offre une alternative à `console.log(...)`. Elle affiche les valeurs des variables spécifiées lorsqu'elle changent, et met en pause l'exécution du code si vous avez les outils de développement ouverts.
```svelte ```svelte
<script> <script>
@ -46,21 +45,21 @@ The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the
<h1>Hello {user.firstname}!</h1> <h1>Hello {user.firstname}!</h1>
``` ```
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions). `{@debug ...}` accepte une liste de noms de variables séparés par des virgules (mais pas des expressions).
```svelte ```svelte
<!-- Compiles --> <!-- Compile -->
{@debug user} {@debug user}
{@debug user1, user2, user3} {@debug user1, user2, user3}
<!-- WON'T compile --> <!-- Ne compile pas -->
{@debug user.firstname} {@debug user.firstname}
{@debug myArray[0]} {@debug myArray[0]}
{@debug !isReady} {@debug !isReady}
{@debug typeof user === 'object'} {@debug typeof user === 'object'}
``` ```
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables. La balise `{@debug}` sans argument insère une expression `debugger` qui est déclenchée lorsque _n'importe quel_ état change, plutôt que certaines variables spécifiques.
## {@const ...} ## {@const ...}
@ -68,7 +67,7 @@ The `{@debug}` tag without any arguments will insert a `debugger` statement that
{@const assignment} {@const assignment}
``` ```
The `{@const ...}` tag defines a local constant. La balise `{@const ...}` définit une constante locale.
```svelte ```svelte
<script> <script>
@ -81,4 +80,4 @@ The `{@const ...}` tag defines a local constant.
{/each} {/each}
``` ```
`{@const}` is only allowed as direct child of `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` or `<svelte:fragment />`. `{@const}` est uniquement utilisable en tant qu'enfant direct de `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` ou `<svelte:fragment />`.

440
documentation/docs/02-template-syntax/05-element-directives.md
Unescape View File

@ -1,91 +1,88 @@
--- ---
title: Element directives title: Directives d'éléments
--- ---
As well as attributes, elements can have _directives_, which control the element's behaviour in some way. En plus des attributs, les éléments peuvent avoir des _directives_, qui contrôlent le comportement des éléments de différentes manières.
## on:_eventname_ ## on:_eventname_
```svelte ```svelte
on:eventname={handler} on:eventname={handler}
``` ```
```svelte ```svelte
on:eventname|modifiers={handler} on:eventname|modifiers={handler}
``` ```
Use the `on:` directive to listen to DOM events. Utilisez la directive `on:` pour écouter des évènements du <span class='vo'>[DOM](/docs/web#dom)</span>.
```svelte ```svelte
<!--- file: App.svelte --->
<script> <script>
let count = 0; let count = 0;
/** @param {MouseEvent} event */
function handleClick(event) { function handleClick(event) {
count += 1; count += 1;
} }
</script> </script>
<button on:click={handleClick}> <button on:click={handleClick}>
count: {count} Compte: {count}
</button> </button>
``` ```
Handlers can be declared inline with no performance penalty. As with attributes, directive values may be quoted for the sake of syntax highlighters. Les gestionnaires d'évènement peuvent être déclarés directement sans pénaliser les performances. Comme pour les attributs, les valeurs utilisées pour les directives peuvent être mises entre guillemets afin d'aider la coloration syntaxique.
```svelte ```svelte
<button on:click={() => (count += 1)}> <button on:click="{() => count += 1}">
count: {count} Compte: {count}
</button> </button>
``` ```
Add _modifiers_ to DOM events with the `|` character. Ajoutez des *modificateurs* aux évènements <span class='vo'>[DOM](/docs/web#dom)</span> avec le caractère `|`.
```svelte ```svelte
<form on:submit|preventDefault={handleSubmit}> <form on:submit|preventDefault={handleSubmit}>
<!-- the `submit` event's default is prevented, <!-- le comportement par défaut de l'évènement `submit` est ignoré,
so the page won't reload --> ce qui permet de ne pas recharger la page -->
</form> </form>
``` ```
The following modifiers are available: Les modificateurs suivants sont disponibles:
- `preventDefault` — calls `event.preventDefault()` before running the handler * `preventDefault` — appelle `event.preventDefault()` avant d'exécuter le gestionnaire d'évènement
- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element * `stopPropagation` — appelle `event.stopPropagation()`, empêchant l'évènement d'atteindre le prochain élément
- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired. * `stopImmediatePropagation` - appelle `event.stopImmediatePropagation()`, empêchant d'autres gestionnaires du même évènement d'être exécutés
- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) * `passive` — améliore la performance du défilement pour les évènements `touch`/`wheel` (Svelte l'ajoutera automatiquement lorsque qu'il détecte que ce n'est pas problématique)
- `nonpassive` — explicitly set `passive: false` * `nonpassive` — déclare explicitement l'évènement avec `passive: false`
- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase * `capture` — déclenche le gestionnaire d'évènement pendant la phase de _capture_ plutôt que pendant la phase de _bubbling_
- `once` — remove the handler after the first time it runs * `once` — supprime le gestionnaire d'évènement après sa première exécution
- `self` — only trigger handler if `event.target` is the element itself * `self` — ne déclenche le gestionnaire d'évènement que si `event.target` est l'élément lui-même
- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action. * `trusted` — ne déclenche le gestionnaire d'évènement que si `event.isTrusted` est `true`. C'est-à-dire si l'évènement est déclenché par une action utilisateur.
Modifiers can be chained together, e.g. `on:click|once|capture={...}`. Vous pouvez chaîner les modificateurs, par ex. `on:click|once|capture={...}`.
If the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it. Si la directive `on:` est utilisée sans valeur, le composant relaiera l'évènement à son parent, ce qui permettra à ce dernier de l'écouter.
```svelte ```svelte
<button on:click> The component itself will emit the click event </button> <button on:click>
Le composant lui-même va émettre un évènement clic
</button>
``` ```
It's possible to have multiple event listeners for the same event: Il est possible d'avoir plusieurs gestionnaires pour le même évènement:
```svelte ```svelte
<!--- file: App.svelte --->
<script> <script>
let counter = 0; let counter = 0;
function increment() { function increment() {
counter = counter + 1; counter = counter + 1;
} }
/** @param {MouseEvent} event */
function track(event) { function track(event) {
trackEvent(event); trackEvent(event)
} }
</script> </script>
<button on:click={increment} on:click={track}>Click me!</button> <button on:click={increment} on:click={track}>Cliquez moi !</button>
``` ```
## bind:_property_ ## bind:_property_
@ -94,59 +91,64 @@ It's possible to have multiple event listeners for the same event:
bind:property={variable} bind:property={variable}
``` ```
Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent. Most bindings are specific to particular elements. En général, la donnée _descend_ du parent vers l'enfant. La directive `bind:` permet à la donnée de remonter de l'enfant vers le parent. Le plus souvent ces liaisons sont spécifiques à des éléments particuliers.
The simplest bindings reflect the value of a property, such as `input.value`. L'exemple le plus simple d'une liaison reflète la valeur d'une propriété, comme `input.value`.
```svelte ```svelte
<input bind:value={name} /> <input bind:value={name}>
<textarea bind:value={text} /> <textarea bind:value={text}></textarea>
<input type="checkbox" bind:checked={yes} /> <input type="checkbox" bind:checked={yes}>
``` ```
If the name matches the value, you can use a shorthand. Si le nom de la variable est le même que le nom de la propriété, vous pouvez simplifier l'écriture.
```svelte ```svelte
<input bind:value /> <!-- Ces écritures sont équivalentes -->
<!-- equivalent to <input bind:value={value}>
<input bind:value={value} /> <input bind:value>
-->
``` ```
Numeric input values are coerced; even though `input.value` is a string as far as the DOM is concerned, Svelte will treat it as a number. If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`. Les valeurs numériques sont traitées comme des nombres ; même si `input.value` est une chaîne de caractères pour le <span class='vo'>[DOM](/docs/web#dom)</span>, Svelte traitera cette valeur comme un nombre. Si l'`<input>` est vide ou invalide (dans le cas de `type="number"` par exemple), la valeur sera `undefined`.
```svelte ```svelte
<input type="number" bind:value={num} /> <input type="number" bind:value={num}>
<input type="range" bind:value={num} /> <input type="range" bind:value={num}>
``` ```
On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly. Sur les éléments `<input>` de type `type="file"`, vous pouvez utiliser `bind:files` pour obtenir la [`FileList` des fichiers sélectionnés](https://developer.mozilla.org/fr/docs/Web/API/FileList). Cette liste est en lecture seule.
```svelte ```svelte
<label for="avatar">Upload a picture:</label> <label for="avatar">Choisissez une image :</label>
<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" /> <input
accept="image/png, image/jpeg"
bind:files
id="avatar"
name="avatar"
type="file"
/>
``` ```
If you're using `bind:` directives together with `on:` directives, the order that they're defined in affects the value of the bound variable when the event handler is called. Si vous utilisez des directives `bind:` conjointement à des directives `on:`, l'ordre dans lequel elles sont définies affectera la valeur de la variable liée lorsque la fonction d'écoute sera appelée.
```svelte ```svelte
<script> <script>
let value = 'Hello World'; let value = 'Bonjour tout le monde';
</script> </script>
<input <input
on:input={() => console.log('Old value:', value)} on:input={() => console.log('Ancienne valeur:', value)}
bind:value bind:value
on:input={() => console.log('New value:', value)} on:input={() => console.log('Nouvelle valeur:', value)}
/> />
``` ```
Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`. Dans ce cas, nous avons lié la valeur d'un `<input>` de texte qui utilise l'évènement `input`. Des liaisons sur d'autres éléments pourraient utiliser d'autres évènements comme `change`.
## Binding `<select>` value ### Lier les valeurs de `<select>`
A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM). Une liaison sur un `<select>` correspond à la propriété `value` de l'`<option>` sélectionnée, qui peut être n'importe quelle valeur (pas uniquement des chaînes de caractères, comme c'est le cas en général dans le <span class='vo'>[DOM](/docs/web#dom)</span>).
```svelte ```svelte
<select bind:value={selected}> <select bind:value={selected}>
@ -156,70 +158,71 @@ A `<select>` value binding corresponds to the `value` property on the selected `
</select> </select>
``` ```
A `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`. Un élément `<select multiple>` se comporte de manière similaire à un groupe de `<checkbox>`. La variable liée est un tableau avec un élément correspondant à la propriété `value` de chaque `<option>` sélectionnée.
```svelte ```svelte
<select multiple bind:value={fillings}> <select multiple bind:value={fillings}>
<option value="Rice">Rice</option> <option value="Riz">Riz</option>
<option value="Beans">Beans</option> <option value="Haricots">Haricots</option>
<option value="Cheese">Cheese</option> <option value="Fromage">Fromage</option>
<option value="Guac (extra)">Guac (extra)</option> <option value="Guacamole (supplément)">Guacamole (supplément)</option>
</select> </select>
``` ```
When the value of an `<option>` matches its text content, the attribute can be omitted. Quand la valeur d'une `<option>` correspond à son contenu texte, l'attribut peut être ignoré.
```svelte ```svelte
<select multiple bind:value={fillings}> <select multiple bind:value={fillings}>
<option>Rice</option> <option>Riz</option>
<option>Beans</option> <option>Haricots</option>
<option>Cheese</option> <option>Formage</option>
<option>Guac (extra)</option> <option>Guacamole (supplément)</option>
</select> </select>
``` ```
Elements with the `contenteditable` attribute support the following bindings: Les éléments avec l'attribut `contenteditable` permettent les liaisons suivantes:
- [`innerHTML`](https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML)
- [`innerText`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/innerText)
- [`textContent`](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent)
- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) Il y a de légères différences entre ces différentes liaisons, apprenez-en plus [ici](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent#Differences_from_innerText).
- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
```svelte ```svelte
<div contenteditable="true" bind:innerHTML={html} /> <div contenteditable="true" bind:innerHTML={html}></div>
``` ```
`<details>` elements support binding to the `open` property. Les éléments `<details>` permettent les liaisons avec la propriété `open`.
```svelte ```svelte
<details bind:open={isOpen}> <details bind:open={isOpen}>
<summary>Details</summary> <summary>Détails</summary>
<p>Something small enough to escape casual notice.</p> <p>
Quelque chose suffisamment petit pour passer inaperçu.
</p>
</details> </details>
``` ```
## Media element bindings ### Liaisons d'éléments media
Media elements (`<audio>` and `<video>`) have their own set of bindings — seven _readonly_ ones... Les éléments media (`<audio>` et `<video>`) ont leurs propres liaisons — au nombre de 7 et en _lecture seule_ ...
- `duration` (readonly) — the total duration of the video, in seconds * `duration` (lecture seule) — durée totale de la vidéo, en secondes
- `buffered` (readonly) — an array of `{start, end}` objects * `buffered` (lecture seule) — tableau d'objets `{start, end}`
- `played` (readonly) — ditto * `played` (lecture seule) — idem
- `seekable` (readonly) — ditto * `seekable` (lecture seule) — idem
- `seeking` (readonly) — boolean * `seeking` (lecture seule) — booléen
- `ended` (readonly) — boolean * `ended` (lecture seule) — booléen
- `readyState` (readonly) — number between (and including) 0 and 4 * `readyState` (lecture seule) — nombre entre 0 (inclus) et 4 (inclus)
...and five _two-way_ bindings: ... et 5 liaisons _lecture-écriture_ :
- `currentTime` — the current playback time in the video, in seconds * `currentTime` — temps actuel de lecture de la vidéo, en secondes
- `playbackRate` — how fast or slow to play the video, where 1 is 'normal' * `playbackRate` — vitesse de lecture de la vidéo, 1 étant 'normal'
- `paused` — this one should be self-explanatory * `paused` — a priori vous voyez ce que c'est
- `volume` — a value between 0 and 1 * `volume` — une valeur entre 0 et 1
- `muted` — a boolean value indicating whether the player is muted * `muted` — booléen indiquant si le lecteur est en sourdine
Videos additionally have readonly `videoWidth` and `videoHeight` bindings. Les vidéos ont de plus des liaisons en lecture seule pour les attributs `videoWidth` et `videoHeight`.
```svelte ```svelte
<video <video
@ -238,15 +241,15 @@ Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
bind:muted bind:muted
bind:videoWidth bind:videoWidth
bind:videoHeight bind:videoHeight
/> ></video>
``` ```
## Image element bindings ### Liaisons des éléments image
Image elements (`<img>`) have two readonly bindings: Les éléments d'image (`<img>`) ont deux liaisons en lecture seule :
- `naturalWidth` (readonly) — the original width of the image, available after the image has loaded * `naturalWidth` (lecture seule) — la largeur d'origine de l'image, disponible après le chargement de l'image
- `naturalHeight` (readonly) — the original height of the image, available after the image has loaded * `naturalHeight` (lecture seule) — la hauteur d'origine de l'image, disponible après le chargement de l'image
```svelte ```svelte
<img <img
@ -255,18 +258,21 @@ Image elements (`<img>`) have two readonly bindings:
></img> ></img>
``` ```
## Block-level element bindings ### Liaisons des éléments de type `block`
Block-level elements have 4 read-only bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/): Les éléments de type `block` ont 4 liaisons en lecture seule, mesurées en utilisant [une technique similaire à celle-ci](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) (en anglais):
- `clientWidth` * `clientWidth`
- `clientHeight` * `clientHeight`
- `offsetWidth` * `offsetWidth`
- `offsetHeight` * `offsetHeight`
```svelte ```svelte
<div bind:offsetWidth={width} bind:offsetHeight={height}> <div
<Chart {width} {height} /> bind:offsetWidth={width}
bind:offsetHeight={height}
>
<Chart {width} {height}/>
</div> </div>
``` ```
@ -276,30 +282,27 @@ Block-level elements have 4 read-only bindings, measured using a technique simil
bind:group={variable} bind:group={variable}
``` ```
Inputs that work together can use `bind:group`. Les inputs qui fonctionnent ensemble peuvent utiliser `bind:group`.
```svelte ```svelte
<!--- file: App.svelte --->
<script> <script>
let tortilla = 'Plain'; let tortilla = 'Simple';
/** @type {Array<string>} */
let fillings = []; let fillings = [];
</script> </script>
<!-- grouped radio inputs are mutually exclusive --> <!-- les inputs radio groupés sont mutuellement exclusifs -->
<input type="radio" bind:group={tortilla} value="Plain" /> <input type="radio" bind:group={tortilla} value="Simple">
<input type="radio" bind:group={tortilla} value="Whole wheat" /> <input type="radio" bind:group={tortilla} value="Complète">
<input type="radio" bind:group={tortilla} value="Spinach" /> <input type="radio" bind:group={tortilla} value="Épinards">
<!-- grouped checkbox inputs populate an array --> <!-- les inputs checkbox groupés remplissent un tableau -->
<input type="checkbox" bind:group={fillings} value="Rice" /> <input type="checkbox" bind:group={fillings} value="Riz">
<input type="checkbox" bind:group={fillings} value="Beans" /> <input type="checkbox" bind:group={fillings} value="Haricots">
<input type="checkbox" bind:group={fillings} value="Cheese" /> <input type="checkbox" bind:group={fillings} value="Fromage">
<input type="checkbox" bind:group={fillings} value="Guac (extra)" /> <input type="checkbox" bind:group={fillings} value="Guacamole (supplément)">
``` ```
> `bind:group` only works if the inputs are in the same Svelte component. > `bind:group` ne fonctionne que si les `<input>` sont dans le même composant Svelte.
## bind:this ## bind:this
@ -307,14 +310,12 @@ Inputs that work together can use `bind:group`.
bind:this={dom_node} bind:this={dom_node}
``` ```
To get a reference to a DOM node, use `bind:this`. Utiliser `bind:this` vous permet d'obtenir une référence à un noeud <span class='vo'>[DOM](/docs/web#dom)</span>.
```svelte ```svelte
<!--- file: App.svelte --->
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
/** @type {HTMLCanvasElement} */
let canvasElement; let canvasElement;
onMount(() => { onMount(() => {
@ -323,7 +324,7 @@ To get a reference to a DOM node, use `bind:this`.
}); });
</script> </script>
<canvas bind:this={canvasElement} /> <canvas bind:this={canvasElement}></canvas>
``` ```
## class:_name_ ## class:_name_
@ -331,22 +332,21 @@ To get a reference to a DOM node, use `bind:this`.
```svelte ```svelte
class:name={value} class:name={value}
``` ```
```svelte ```svelte
class:name class:name
``` ```
A `class:` directive provides a shorter way of toggling a class on an element. Une directive `class:` permet de facilement ajouter ou enlever une classe à un élément.
```svelte ```svelte
<!-- These are equivalent --> <!-- Ces syntaxes sont équivalentes -->
<div class={isActive ? 'active' : ''}>...</div> <div class="{active ? 'active' : ''}">...</div>
<div class:active={isActive}>...</div> <div class:active={active}>...</div>
<!-- Shorthand, for when name and value match --> <!-- Syntaxe raccourcie, quand le nom de la variable correspond au nom de la classe -->
<div class:active>...</div> <div class:active>...</div>
<!-- Multiple class toggles can be included --> <!-- Plusieurs directives `class:` peuvent être utilisées -->
<div class:active class:inactive={!active} class:isAdmin>...</div> <div class:active class:inactive={!active} class:isAdmin>...</div>
``` ```
@ -355,39 +355,37 @@ A `class:` directive provides a shorter way of toggling a class on an element.
```svelte ```svelte
style:property={value} style:property={value}
``` ```
```svelte ```svelte
style:property="value" style:property="value"
``` ```
```svelte ```svelte
style:property style:property
``` ```
The `style:` directive provides a shorthand for setting multiple styles on an element. La directive `style:` fournit un raccourci pour modifier directement le style d'un élément.
```svelte ```svelte
<!-- These are equivalent --> <!-- Ces syntaxes sont équivalentes -->
<div style:color="red">...</div> <div style:color="red">...</div>
<div style="color: red;">...</div> <div style="color: red;">...</div>
<!-- Variables can be used --> <!-- Vous pouvez utiliser des variables -->
<div style:color={myColor}>...</div> <div style:color={myColor}>...</div>
<!-- Shorthand, for when property and variable name match --> <!-- Syntaxe raccourcie, quand le nom de la variable correspond au nom de la propriété -->
<div style:color>...</div> <div style:color>...</div>
<!-- Multiple styles can be included --> <!-- Plusieurs directives `style:` peuvent être utilisées -->
<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div> <div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}>...</div>
<!-- Styles can be marked as important --> <!-- Vous pouvez définir des styles comme importants -->
<div style:color|important="red">...</div> <div style:color|important="red">...</div>
``` ```
When `style:` directives are combined with `style` attributes, the directives will take precedence: Quand des directives `style:` sont combinées avec des attributs `style`, les directives sont prioritaires.
```svelte ```svelte
<div style="color: blue;" style:color="red">This will be red</div> <div style="color: blue;" style:color="red">Ceci sera rouge</div>
``` ```
## use:_action_ ## use:_action_
@ -395,7 +393,6 @@ When `style:` directives are combined with `style` attributes, the directives wi
```svelte ```svelte
use:action use:action
``` ```
```svelte ```svelte
use:action={parameters} use:action={parameters}
``` ```
@ -408,55 +405,52 @@ action = (node: HTMLElement, parameters: any) => {
} }
``` ```
Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted: Les actions sont des fonctions exécutées lorsqu'un élément est créé. Elles peuvent renvoyer un objet avec une méthode `destroy` qui sera appelée lors de la destruction de l'élément.
```svelte ```svelte
<!--- file: App.svelte --->
<script> <script>
/** @type {import('svelte/action').Action} */
function foo(node) { function foo(node) {
// the node has been mounted in the DOM // le noeud a été ajouté au DOM
return { return {
destroy() { destroy() {
// the node has been removed from the DOM // le noeud a été supprimé du DOM
} }
}; };
} }
</script> </script>
<div use:foo /> <div use:foo></div>
``` ```
An action can have a parameter. If the returned value has an `update` method, it will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup. Une action peut avoir un argument. Si la valeur renvoyée possède une méthode `update`, celle-ci sera exécutée à chaque fois que cet argument changera, juste après que Svelte a appliqué les modifications au <span class="vo">[markup](/docs/web#markup)</span>.
> Ne vous inquiétez pas du fait que l'on redéclare la fonction `foo` pour chaque instance — Svelte garde en mémoire toute fonction qui ne dépend pas d'un état local en dehors de la définition du composant.
> Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
```svelte ```svelte
<!--- file: App.svelte --->
<script> <script>
export let bar; export let bar;
/** @type {import('svelte/action').Action} */
function foo(node, bar) { function foo(node, bar) {
// the node has been mounted in the DOM // le noeud a été ajouté au DOM
return { return {
update(bar) { update(bar) {
// the value of `bar` has changed // la valeur de `bar` a changé
}, },
destroy() { destroy() {
// the node has been removed from the DOM // le noeud a été supprimé du DOM
} }
}; };
} }
</script> </script>
<div use:foo={bar} /> <div use:foo={bar}></div>
``` ```
Read more in the [`svelte/action`](/docs/svelte-action) page. Plus d'infos dans la page [`svelte/action`](/docs/svelte-action).
## transition:_fn_ ## transition:_fn_
@ -484,7 +478,7 @@ transition:fn|local
transition:fn|local={params} transition:fn|local={params}
``` ```
```js ```ts
// @noErrors // @noErrors
transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => { transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
delay?: number, delay?: number,
@ -495,53 +489,57 @@ transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out'
} }
``` ```
A transition is triggered by an element entering or leaving the DOM as a result of a state change. Une transition est déclenchée lorsqu'un élément entre ou sort du <span class='vo'>[DOM](/docs/web#dom)</span> après un changement d'état.
When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed. Quand un bloc transitionne vers sa sortie, tous les éléments au sein du bloc, y compris ceux n'ayant pas de transition propre, sont laissés dans le DOM tant que toutes les transitions du bloc se soient terminées.
The `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress. La directive `transition:` établit une transition _bidirectionnelle_, ce qui implique qu'elle peut être inversée sans heurts en cours de transition.
```svelte ```svelte
{#if visible} {#if visible}
<div transition:fade>fades in and out</div> <div transition:fade>
s'estompe en entrant et en sortant
</div>
{/if} {/if}
``` ```
Transitions are local by default (in Svelte 3, they were global by default). Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed. Les transitions sont locales par défaut (dans Svelte 3, elles étaient globales par défaut). Les transitions locales sont jouées uniquement lorsque le bloc auquel elles appartiennent est créé ou détruit, _pas_ lorsqu'un bloc parent est créé ou détruit.
```svelte ```svelte
{#if x} {#if x}
{#if y} {#if y}
<!-- Svelte 3: <p transition:fade|local> --> <!-- Svelte 3: <p transition:fade|local> -->
<p transition:fade>fades in and out only when y changes</p> <p transition:fade>entre et sort en s'estompant seulement quand y change</p>
<!-- Svelte 3: <p transition:fade> --> <!-- Svelte 3: <p transition:fade> -->
<p transition:fade|global>fades in and out when x or y change</p> <p transition:fade|global>entre et sort en s'estompant quand x ou y change</p>
{/if} {/if}
{/if} {/if}
``` ```
> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs/client-side-component-api) and marking the transition as `global`. > Par défaut, les transitions d'entrée (`in`) ne sont pas jouées au premier rendu. Vous pouvez modifier ce comportement en appliquant `intro: true` lorsque vous [instanciez manuellement un composant](/docs/client-side-component-api).
## Transition parameters ## Paramètres de transition
Like actions, transitions can have parameters. À l'instar des actions, les transitions peuvent avoir des paramètres.
(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.) (La syntaxe `{{accolades}}` n'est pas spéciale ; il s'agit simplement d'un objet dans une balise d'expression.)
```svelte ```svelte
{#if visible} {#if visible}
<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div> <div transition:fade="{{ duration: 2000 }}">
s'estompe en entrant et en sortant sur une durée de 2 secondes
</div>
{/if} {/if}
``` ```
## Custom transition functions ## Transitions personnalisées
Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element. Les transitions peuvent être définies par des fonctions personnalisées. Si l'objet retourné possède une fonction `css`, Svelte créera une animation CSS qui sera jouée sur l'élément.
The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`. L'argument `t` passé à `css` est une valeur entre `0` et `1` après que la fonction `easing` a été appliquée. Les transitions _entrantes_ sont jouées de `0` à `1`, les transitions _sortantes_ sont jouées de `1` à `0` — en d'autres termes, `1` est l'état normal de l'élément, comme si aucune transition ne lui était appliquée. L'argument `u` est égal à `1 - t`.
The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments. La fonction est régulièrement appelée _avant_ que la transition ne commence, avec différentes valeurs pour `t` et `u`.
```svelte ```svelte
<!--- file: App.svelte ---> <!--- file: App.svelte --->
@ -568,13 +566,13 @@ The function is called repeatedly _before_ the transition begins, with different
</script> </script>
{#if visible} {#if visible}
<div in:whoosh>whooshes in</div> <div in:whoosh>entre en faisant woosh</div>
{/if} {/if}
``` ```
A custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments. Une fonction de transition personnalisée peut aussi renvoyer une fonction `tick`, qui est appelée _pendant_ la transition avec les mêmes arguments `t` et `u`.
> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices. > Il est recommandé d'utiliser `css` plutôt que `tick`, si possible — les animations CSS sont exécutées sur un <span class='vo'>[thread](/docs/development#thread)</span> différent de celui de JS, évitant ainsi de ralentir les machines les moins puissantes.
```svelte ```svelte
<!--- file: App.svelte ---> <!--- file: App.svelte --->
@ -586,10 +584,13 @@ A custom transition function can also return a `tick` function, which is called
* @param {{ speed?: number }} params * @param {{ speed?: number }} params
*/ */
function typewriter(node, { speed = 1 }) { function typewriter(node, { speed = 1 }) {
const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE; const valid = (
node.childNodes.length === 1 &&
node.childNodes[0].nodeType === Node.TEXT_NODE
);
if (!valid) { if (!valid) {
throw new Error(`This transition only works on elements with a single text node child`); throw new Error(`Cette transition ne fonctionne que sur les éléments avec un seul noeud texte comme enfant`);
} }
const text = node.textContent; const text = node.textContent;
@ -597,7 +598,7 @@ A custom transition function can also return a `tick` function, which is called
return { return {
duration, duration,
tick: (t) => { tick: t => {
const i = ~~(text.length * t); const i = ~~(text.length * t);
node.textContent = text.slice(0, i); node.textContent = text.slice(0, i);
} }
@ -606,37 +607,39 @@ A custom transition function can also return a `tick` function, which is called
</script> </script>
{#if visible} {#if visible}
<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p> <p in:typewriter="{{ speed: 1 }}">
Portez ce vieux whisky au juge blond qui fume
</p>
{/if} {/if}
``` ```
If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](https://learn.svelte.dev/tutorial/deferred-transitions) possible. Si une transition retourne une fonction au lieu d'un objet transition, la fonction sera appelée lors de la prochaine micro-tâche. Cela permet à plusieurs transitions de se coordonner, rendant les effets de [fondu croisé](https://learn.svelte.dev/tutorial/deferred-transitions) possibles.
Transition functions also receive a third argument, `options`, which contains information about the transition. Les fonctions de transition peuvent aussi avoir un troisième argument, `options`, qui contient des informations sur la transition.
Available values in the `options` object are: Les valeurs possibles dans l'objet `options` sont:
- `direction` - one of `in`, `out`, or `both` depending on the type of transition * `direction` - `in`, `out`, or `both`, selon le type de transition
## Transition events ## Évènements de transition
An element with transitions will dispatch the following events in addition to any standard DOM events: Un élément ayant des transitions génére les évènements suivants en plus des évènements <span class='vo'>[DOM](/docs/web#dom)</span> standards:
- `introstart` * `introstart`
- `introend` * `introend`
- `outrostart` * `outrostart`
- `outroend` * `outroend`
```svelte ```svelte
{#if visible} {#if visible}
<p <p
transition:fly={{ y: 200, duration: 2000 }} transition:fly="{{ y: 200, duration: 2000 }}"
on:introstart={() => (status = 'intro started')} on:introstart="{() => status = "début de l'entrée"}"
on:outrostart={() => (status = 'outro started')} on:outrostart="{() => status = "début de la sortie"}"
on:introend={() => (status = 'intro ended')} on:introend="{() => status = "fin de l'entrée"}"
on:outroend={() => (status = 'outro ended')} on:outroend="{() => status = "fin de la sortie"}"
> >
Flies in and out Entre et sort en volant
</p> </p>
{/if} {/if}
``` ```
@ -691,13 +694,15 @@ out:fn|local
out:fn|local={params} out:fn|local={params}
``` ```
Similar to `transition:`, but only applies to elements entering (`in:`) or leaving (`out:`) the DOM. Similaire à `transition:`, mais s'applique uniquement aux éléments entrant (`in:`) ou sortant (`out:`) du <span class='vo'>[DOM](/docs/web#dom)</span>.
Unlike with `transition:`, transitions applied with `in:` and `out:` are not bidirectional — an in transition will continue to 'play' alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch. Contrairement à `transition:`, les transitions appliquées avec `in:` et `out:` ne sont pas bi-directionnelles — une transition entrante continuera sa course en parallèle de la transition sortante, plutôt que d'être inversée, si le bloc est supprimé pendant la transition en cours. Si une transition sortante est annulée, les transitions seront rejouées du début.
```svelte ```svelte
{#if visible} {#if visible}
<div in:fly out:fade>flies in, fades out</div> <div in:fly out:fade>
entre en volant, sort en fondu
</div>
{/if} {/if}
``` ```
@ -711,7 +716,7 @@ animate:name
animate:name={params} animate:name={params}
``` ```
```js ```ts
// @noErrors // @noErrors
animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => { animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
delay?: number, delay?: number,
@ -736,38 +741,38 @@ DOMRect {
} }
``` ```
An animation is triggered when the contents of a [keyed each block](/docs/logic-blocks#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block. Une animation est déclenchée quand le contenu d'un [bloc `each` à clé](/docs/logic-blocks#each) est réordonné. Les animations ne sont pas jouées lorsqu'un élément est ajouté ou supprimé, seulement lorsque l'indice d'un élément de liste change au sein d'un bloc `each`. Les directives `animate:` doivent appartenir à un élément enfant _direct_ d'un bloc `each` à clé.
Animations can be used with Svelte's [built-in animation functions](/docs/svelte-animate) or [custom animation functions](/docs/element-directives#custom-animation-functions). Les animations peuvent être utilisées avec les [fonctions d'animation natives](/docs/svelte-animate) de Svelte ou avec des [fonctions d'animation personnalisées](/docs/element-directives#fonctions-d-animation-personnalis-es).
```svelte ```svelte
<!-- When `list` is reordered the animation will run--> <!-- Quand `list` est réordonnée, l'animation sera jouée -->
{#each list as item, index (item)} {#each list as item, index (item)}
<li animate:flip>{item}</li> <li animate:flip>{item}</li>
{/each} {/each}
``` ```
## Animation Parameters ## Paramètres d'animation
As with actions and transitions, animations can have parameters. À l'instar des actions et des transitions, les animations peuvent avoir des paramètres.
(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.) (La syntaxe `{{accolades}}` n'est pas spéciale; il s'agit simplement d'un objet dans une balise d'expression.)
```svelte ```svelte
{#each list as item, index (item)} {#each list as item, index (item)}
<li animate:flip={{ delay: 500 }}>{item}</li> <li animate:flip="{{ delay: 500 }}">{item}</li>
{/each} {/each}
``` ```
## Custom animation functions ## Fonctions d'animation personnalisées
Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated. Les animations peuvent être définies par des fonctions fournissant un `node`, un objet `animation`, et n'importe quels `parameters` en arguments. L'argument `animation` est un objet ayant les propriétés `from` et `to`, chacune contenant un [DOMRect](https://developer.mozilla.org/fr/docs/Web/API/DOMRect#Properties) décrivant la géométrie de l'élément dans ses positions de départ (`start`) et arrivée (`end`). La propriété `from` est le DOMRect de l'élément dans sa position de départ, la propriété `to` est le DOMRect de l'élément dans sa position d'arrivée après que la liste a été réordonnée et le <span class='vo'>[DOM](/docs/web#dom)</span> mis à jour.
If the returned object has a `css` method, Svelte will create a CSS animation that plays on the element. Si l'objet renvoyé a une méthode `css`, Svelte va créer une animation CSS qui sera jouée sur l'élément.
The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`. L'argument `t` passé à `css` est une valeur qui va de `0` à `1` avec que la fonction `easing` a été appliquée. L'argument `u` est égal à `1 - t`.
The function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments. La fonction est régulièrement appelée _avant_ que la transition ne commence, avec différentes valeurs pour `t` et `u`.
<!-- TODO: Types --> <!-- TODO: Types -->
@ -782,6 +787,7 @@ The function is called repeatedly _before_ the animation begins, with different
* @param {any} params * @param {any} params
*/ */
function whizz(node, { from, to }, params) { function whizz(node, { from, to }, params) {
const dx = from.left - to.left; const dx = from.left - to.left;
const dy = from.top - to.top; const dy = from.top - to.top;
@ -791,7 +797,7 @@ The function is called repeatedly _before_ the animation begins, with different
delay: 0, delay: 0,
duration: Math.sqrt(d) * 120, duration: Math.sqrt(d) * 120,
easing: cubicOut, easing: cubicOut,
css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);` css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t*360}deg);`
}; };
} }
</script> </script>
@ -801,9 +807,9 @@ The function is called repeatedly _before_ the animation begins, with different
{/each} {/each}
``` ```
A custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments. Une fonction d'animation personnalisée peut aussi renvoyer une fonction `tick`, qui est appelée _pendant_ la transition avec les mêmes arguments `t` et `u`.
> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices. > Il est recommandé d'utiliser `css` plutôt que `tick`, si possible — les animations CSS sont exécutées sur un <span class='vo'>[thread](/docs/development#thread)</span> différent de celui de JS, évitant ainsi de ralentir les machines les moins puissantes.
```svelte ```svelte
<!--- file: App.svelte ---> <!--- file: App.svelte --->
@ -816,6 +822,7 @@ A custom animation function can also return a `tick` function, which is called _
* @param {any} params * @param {any} params
*/ */
function whizz(node, { from, to }, params) { function whizz(node, { from, to }, params) {
const dx = from.left - to.left; const dx = from.left - to.left;
const dy = from.top - to.top; const dy = from.top - to.top;
@ -825,7 +832,8 @@ A custom animation function can also return a `tick` function, which is called _
delay: 0, delay: 0,
duration: Math.sqrt(d) * 120, duration: Math.sqrt(d) * 120,
easing: cubicOut, easing: cubicOut,
tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' }) tick: (t, u) =>
Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
}; };
} }
</script> </script>

71
documentation/docs/02-template-syntax/06-component-directives.md
Unescape View File

@ -1,14 +1,14 @@
--- ---
title: Component directives title: Directives de composant
--- ---
## on:_eventname_ ## on:*eventname*
```svelte ```svelte
on:eventname={handler} on:eventname={handler}
``` ```
Components can emit events using [`createEventDispatcher`](/docs/svelte#createeventdispatcher) or by forwarding DOM events. Les composants peuvent émettre des évènements en utilisant [createEventDispatcher](/docs/svelte#createeventdispatcher), ou en relayant les évènements <span class='vo'>[DOM](/docs/web#dom)</span>.
```svelte ```svelte
<!-- SomeComponent.svelte --> <!-- SomeComponent.svelte -->
@ -29,16 +29,17 @@ Components can emit events using [`createEventDispatcher`](/docs/svelte#createev
</button> </button>
``` ```
Listening for component events looks the same as listening for DOM events: Il est possible d'écouter des évènements de composant de la même manière que pour des évènements <span class='vo'>[DOM](/docs/web#dom)</span> :
```svelte ```svelte
<SomeComponent on:whatever={handler} /> <UnComposant on:peuimporte={handler} />
``` ```
As with DOM events, if the `on:` directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it. Comme pour les évènements <span class='vo'>[DOM](/docs/web#dom)</span>, si la direction `on:` est utilisée sans valeur, l'évènement sera *relayé*, ce qui permet au parent du composant de l'écouter.
```svelte ```svelte
<SomeComponent on:whatever /> <UnComposant on:peuimporte />
``` ```
## --style-props ## --style-props
@ -47,35 +48,48 @@ As with DOM events, if the `on:` directive is used without a value, the event wi
--style-props="anycssvalue" --style-props="anycssvalue"
``` ```
You can also pass styles as props to components for the purposes of theming, using CSS custom properties. Vous pouvez aussi passer des props de style aux composants en utilisant les [propriétés CSS personnalisées](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties). Cela permet notamment d'appliquer des thèmes.
Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example: Cette fonctionnalité est principalement du sucre syntaxique, que Svelte va transformer pour entourer l'élément, comme dans cet exemple :
```svelte ```svelte
<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" /> <Slider
bind:value
min={0}
--rail-color="black"
--track-color="rgb(0, 0, 255)"
/>
``` ```
Desugars to this: Qui va générer :
```svelte ```svelte
<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)"> <div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
<Slider bind:value min={0} max={100} /> <Slider
bind:value
min={0}
max={100}
/>
</div> </div>
``` ```
**Note**: Since this is an extra `<div>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature. **Note**: Faites attention, cette syntaxe ajoute une `<div>` à votre <span class="vo">[markup](/docs/web#markup)</span>, qui pourra être ciblée accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.
For SVG namespace, the example above desugars into using `<g>` instead: Dans le <span class='vo'>[namespace](/docs/development#namespace)</span> SVG, l'exemple ci-dessus va générer un `<g>` à la place d'une `<div>` :
```svelte ```svelte
<g style="--rail-color: black; --track-color: rgb(0, 0, 255)"> <g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
<Slider bind:value min={0} max={100} /> <Slider
bind:value
min={0}
max={100}
/>
</g> </g>
``` ```
**Note**: Since this is an extra `<g>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature. **Note**: Faites attention, cette syntaxe ajoute un `<g>` à votre <span class="vo">[markup](/docs/web#markup)</span>, qui pourra être ciblé accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.
Svelte's CSS Variables support allows for easily themeable components: Le support des variables CSS dans Svelte permet d'appliquer des thèmes aux composants de manière simple :
```svelte ```svelte
<!-- Slider.svelte --> <!-- Slider.svelte -->
@ -86,7 +100,7 @@ Svelte's CSS Variables support allows for easily themeable components:
</style> </style>
``` ```
So you can set a high-level theme color: Vous pouvez alors définir une couleur de thème à plus haut niveau :
```css ```css
/* global.css */ /* global.css */
@ -95,25 +109,25 @@ html {
} }
``` ```
Or override it at the consumer level: Ou l'écraser au niveau de l'instantiation du composant :
```svelte ```svelte
<Slider --rail-color="goldenrod" /> <Slider --rail-color="goldenrod"/>
``` ```
## bind:_property_ ## bind:*property*
```svelte ```svelte
bind:property={variable} bind:property={variable}
``` ```
You can bind to component props using the same syntax as for elements. Vous pouvez lier des props de composant en utilisant la même syntaxe que pour les éléments.
```svelte ```svelte
<Keypad bind:value={pin} /> <Keypad bind:value={pin}/>
``` ```
While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component. Alors que les <span class="vo">[props](/docs/sveltejs#props)</span> de Svelte sont réactives sans ajouter de liaison, cette réactivité est descendante vers l'intérieur du composant par défaut. Utiliser `bind:property` permet aux modifications effectuées sur cette prop depuis l'intérieur du composant de remonter en dehors du composant.
## bind:this ## bind:this
@ -121,12 +135,13 @@ While Svelte props are reactive without binding, that reactivity only flows down
bind:this={component_instance} bind:this={component_instance}
``` ```
Components also support `bind:this`, allowing you to interact with component instances programmatically. Les composants permettent aussi `bind:this`, permettant d'interagir avec les instances de composant programmatiquement.
```svelte ```svelte
<ShoppingCart bind:this={cart} /> <ShoppingCart bind:this={cart}/>
<button on:click={() => cart.empty()}> Empty shopping cart </button> <button on:click={() => cart.empty()}> Caddie vide </button>
``` ```
> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error. > Notez qu'on ne peut pas écrire `{cart.empty}` puisque `cart` est `undefined` quand le bouton est rendu la première fois, ce qui provoquerait une erreur

222
documentation/docs/02-template-syntax/07-special-elements.md
Unescape View File

@ -1,120 +1,118 @@
--- ---
title: Special elements title: Éléments spéciaux
--- ---
## `<slot>` ## `<slot>`
```svelte ```svelte
<slot><!-- optional fallback --></slot> <slot><!-- contenu par défaut optionnel --></slot>
``` ```
```svelte ```svelte
<slot name="x"><!-- optional fallback --></slot> <slot name="x"><!-- contenu par défaut optionnel --></slot>
``` ```
```svelte ```svelte
<slot prop={value} /> <slot prop={value}></slot>
``` ```
Components can have child content, in the same way that elements can. Les composants peuvent avoir du contenu enfant, de la même façon que les éléments.
The content is exposed in the child component using the `<slot>` element, which can contain fallback content that is rendered if no children are provided. Le contenu est exposé dans le composant enfant avec l'élément `<slot>`, qui peut avoir un contenu par défaut qui sera utilisé si aucun enfant n'est fourni.
```svelte ```svelte
<!-- Widget.svelte --> <!-- Widget.svelte -->
<div> <div>
<slot> <slot>
this fallback content will be rendered when no content is provided, like in the first example ce contenu slot par défaut sera rendu si aucun contenu n'est fourni, comme dans le premier exemple
</slot> </slot>
</div> </div>
<!-- App.svelte --> <!-- App.svelte -->
<Widget /> <Widget />
<!-- this component will render the default content --> <!-- ce composant va rendre le contenu par défaut -->
<Widget> <Widget>
<p>this is some child content that will overwrite the default slot content</p> <p>ceci est du contenu qui remplacera le contenu slot par défaut</p>
</Widget> </Widget>
``` ```
Note: If you want to render regular `<slot>` element, You can use `<svelte:element this="slot" />`. Note: Si vous souhaitez afficher [un élément HTML de type `<slot>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot), vous pouvez utiliser `<svelte:element this="slot" />`.
### `<slot name="`_name_`">` ### `<slot name="`*name*`">`
Named slots allow consumers to target specific areas. They can also have fallback content. Les <span class="vo">[slots](/docs/sveltejs#slot)</span> nommés permettent aux parents de cibler des zones spécifiques. Ils peuvent aussi avoir du contenu par défaut.
```svelte ```svelte
<!-- Widget.svelte --> <!-- Widget.svelte -->
<div> <div>
<slot name="header">No header was provided</slot> <slot name="header">Aucun en-tête fourni</slot>
<p>Some content between header and footer</p> <p>Du contenu entre l'en-tête et le bas de page</p>
<slot name="footer" /> <slot name="footer"></slot>
</div> </div>
<!-- App.svelte --> <!-- App.svelte -->
<Widget> <Widget>
<h1 slot="header">Hello</h1> <h1 slot="header">Bonjour</h1>
<p slot="footer">Copyright (c) 2019 Svelte Industries</p> <p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</Widget> </Widget>
``` ```
Components can be placed in a named slot using the syntax `<Component slot="name" />`. Les composants peuvent être placés dans un <span class="vo">[slot](/docs/sveltejs#slot)</span> nommé en utilisant le syntaxe `<Component slot="name />`.
In order to place content in a slot without using a wrapper element, you can use the special element `<svelte:fragment>`. Pour positionner du contenu dans un <span class="vo">[slot](/docs/sveltejs#slot)</span> sans l'entourer d'un élément, vous pouvez utiliser l'élément spécial `<svelte:fragment>`.
```svelte ```svelte
<!-- Widget.svelte --> <!-- Widget.svelte -->
<div> <div>
<slot name="header">No header was provided</slot> <slot name="header">Aucun en-tête fourni</slot>
<p>Some content between header and footer</p> <p>Du contenu entre l'en-tête et le bas de page</p>
<slot name="footer" /> <slot name="footer"></slot>
</div> </div>
<!-- App.svelte --> <!-- App.svelte -->
<Widget> <Widget>
<HeaderComponent slot="header" /> <HeaderComponent slot="header" />
<svelte:fragment slot="footer"> <svelte:fragment slot="footer">
<p>All rights reserved.</p> <p>Tous droits réservés.</p>
<p>Copyright (c) 2019 Svelte Industries</p> <p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment> </svelte:fragment>
</Widget> </Widget>
``` ```
### $$slots ### `$$slots`
`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it. L'objet `$$slots` a comme clés les noms des <span class="vo">[slots](/docs/sveltejs#slot)</span> passés au composant par le parent. Si le parent ne fournit pas un <span class="vo">[slot](/docs/sveltejs#slot)</span> avec un nom particulier, ce nom ne sera pas présent dans `$$slots`. Cela permet aux composants d'afficher un <span class="vo">[slot](/docs/sveltejs#slot)</span> (et d'autres éléments, comment des *wrappers* de style) uniquement si le parent le fournit.
Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `<div slot="title" />` to a child component, `$$slots.title` will be truthy within the child. Notez que passer explicitement un <span class="vo">[slot](/docs/sveltejs#slot)</span> nommé vide ajoutera le nom de ce slot à `$$slots`. Par exemple, si un parent fournit `<div slot="title" />` à un composant enfant, `$$slots.title` sera *truthy* dans l'enfant.
```svelte ```svelte
<!-- Card.svelte --> <!-- Card.svelte -->
<div> <div>
<slot name="title" /> <slot name="title"></slot>
{#if $$slots.description} {#if $$slots.description}
<!-- This <hr> and slot will render only if a slot named "description" is provided. --> <!-- Ce <hr> et ce <slot> seront rendus uniquement si un slot nommé "description" est fourni -->
<hr /> <hr>
<slot name="description" /> <slot name="description"></slot>
{/if} {/if}
</div> </div>
<!-- App.svelte --> <!-- App.svelte -->
<Card> <Card>
<h1 slot="title">Blog Post Title</h1> <h1 slot="title">Titre d'article de blog</h1>
<!-- No slot named "description" was provided so the optional slot will not be rendered. --> <!-- Aucun slot "description" n'est fourni, donc aucun des éléments dépendants de $$slots.description ne sera rendu -->
</Card> </Card>
``` ```
### `<slot key={`_value_`}>` ### `<slot key={`*value*`}>`
Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive. Les <span class="vo">[slots](/docs/sveltejs#slot)</span> peuvent être rendus zéro ou plusieurs fois, et peuvent passer des valeurs *en retour* au parent en utilisant des <span class="vo">[props](/docs/sveltejs#props)</span>. Le parent expose ces valeurs au <span class="vo">[template](/docs/development#template)</span> de <span class="vo">[slot](/docs/sveltejs#slot)</span> avec la directive `let:`.
The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`. Il est possible d'utiliser la syntaxe raccourcie usuelle — `let:item` est équivalent à `let:item={item}`, et `<slot {item}>` est équivalent à `<slot item={item}>`.
```svelte ```svelte
<!-- FancyList.svelte --> <!-- FancyList.svelte -->
<ul> <ul>
{#each items as item} {#each items as item}
<li class="fancy"> <li class="fancy">
<slot prop={item} /> <slot prop={item}></slot>
</li> </li>
{/each} {/each}
</ul> </ul>
@ -125,19 +123,19 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
</FancyList> </FancyList>
``` ```
Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute. Les <span class="vo">[slots](/docs/sveltejs#slot)</span> nommés peuvent aussi exposer des valeurs. La directive `let:` ira sur l'élément avec l'attribut `slot` correspondant.
```svelte ```svelte
<!-- FancyList.svelte --> <!-- FancyList.svelte -->
<ul> <ul>
{#each items as item} {#each items as item}
<li class="fancy"> <li class="fancy">
<slot name="item" {item} /> <slot name="item" {item}></slot>
</li> </li>
{/each} {/each}
</ul> </ul>
<slot name="footer" /> <slot name="footer"></slot>
<!-- App.svelte --> <!-- App.svelte -->
<FancyList {items}> <FancyList {items}>
@ -148,57 +146,55 @@ Named slots can also expose values. The `let:` directive goes on the element wit
## `<svelte:self>` ## `<svelte:self>`
The `<svelte:self>` element allows a component to include itself, recursively. L'élément `<svelte:self>` permet à un composant de s'inclure lui-même, récursivement.
It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop. Cet élément ne peut pas être utilisé à la racine du <span class="vo">[markup](/docs/web#markup)</span> ; il doit être placé à l'intérieur d'un bloc `{#if}` ou `{#each}` ou passé à un `<slot>` pour éviter une boucle infinie.
```svelte ```svelte
<script> <script>
/** @type {number} */
export let count; export let count;
</script> </script>
{#if count > 0} {#if count > 0}
<p>counting down... {count}</p> <p>compte à rebours ... {count}</p>
<svelte:self count={count - 1} /> <svelte:self count="{count - 1}"/>
{:else} {:else}
<p>lift-off!</p> <p>décollage !</p>
{/if} {/if}
``` ```
## `<svelte:component>` ## `<svelte:component>`
```svelte ```svelte
<svelte:component this={expression} /> <svelte:component this={expression}/>
``` ```
The `<svelte:component>` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated. L'élément `<svelte:component>` rend un composant dynamiquement, en utilisant le constructeur du composant spécifié avec la propriété `this`. Quand cette propriété change, l'instance du composant est détruite et recréée.
If `this` is falsy, no component is rendered. Si la valeur de `this` est <span class="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>, aucun composant n'est rendu.
```svelte ```svelte
<svelte:component this={currentSelection.component} foo={bar} /> <svelte:component this={currentSelection.component} foo={bar}/>
``` ```
## `<svelte:element>` ## `<svelte:element>`
```svelte ```svelte
<svelte:element this={expression} /> <svelte:element this={expression}/>
``` ```
The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element. L'élément `<svelte:element>` permet de rendre un élément d'un type spécifié dynamiquement. Cela peut servir par exemple pour afficher du contenu texte enrichi provenant d'un CMS. Toutes les propriétés et fonctions d'écoute d'évènements seront appliquées à l'élément.
The only supported binding is `bind:this`, since the element type-specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type. Le seul type de liaison (<span class="vo">[binding](/docs/sveltejs#binding)</span>) possible dans ce cas est `bind:this`, puisque les liaisons spécifiques créées par Svelte au moment de la compilation pour le type de l'élément (par ex. `bind:value` pour les éléments `<input>`) ne sont pas compatibles avec un type de balise dynamique.
If `this` has a nullish value, the element and its children will not be rendered. Si `this` a une valeur <span class="vo">[nullish](/docs/javascript#nullish)</span>, l'élément et ses enfants ne seront pas rendus.
If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode. Si `this` a pour valeur le nom d'une [balise vide](https://developer.mozilla.org/fr/docs/Glossary/Void_element) (comme `br`), et des enfants ont été fournis à `<svelte:element>`, une erreur d'exécution sera levée en mode développement.
```svelte ```svelte
<script> <script>
let tag = 'div'; let tag = 'div';
/** @type {(e: MouseEvent) => void} */
export let handler; export let handler;
</script> </script>
@ -208,140 +204,148 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
## `<svelte:window>` ## `<svelte:window>`
```svelte ```svelte
<svelte:window on:event={handler} /> <svelte:window on:event={handler}/>
``` ```
```svelte ```svelte
<svelte:window bind:prop={value} /> <svelte:window bind:prop={value}/>
``` ```
The `<svelte:window>` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering. L'élément `<svelte:window>` permet d'ajouter des fonctions d'écoute d'évènements à l'objet `window` sans avoir à penser à les supprimer quand le composant est détruit, ou sans avoir à vérifier l'existence de `window` lorsque l'on fait des rendus côté serveur.
Unlike `<svelte:self>`, this element may only appear at the top level of your component and must never be inside a block or element. À l'inverse de `<svelte:self>`, cet élément peut uniquement être placé à la racine du <span class="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
```svelte ```svelte
<script> <script>
/** @param {KeyboardEvent} event */
function handleKeydown(event) { function handleKeydown(event) {
alert(`pressed the ${event.key} key`); alert(`la touche ${event.key} a été enfoncée`);
} }
</script> </script>
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown}/>
``` ```
You can also bind to the following properties: Vous pouvez aussi lier (avec `bind:`) les propriétés suivantes :
- `innerWidth` * `innerWidth`
- `innerHeight` * `innerHeight`
- `outerWidth` * `outerWidth`
- `outerHeight` * `outerHeight`
- `scrollX` * `scrollX`
- `scrollY` * `scrollY`
- `online` — an alias for `window.navigator.onLine` * `online` — alias de `window.navigator.onLine`
- `devicePixelRatio` * `devicePixelRatio`
All except `scrollX` and `scrollY` are readonly. Toutes ces propriétés sont en lecture seule, à l'exception de `scrollX` and `scrollY`.
```svelte ```svelte
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y}/>
``` ```
> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`. > Notez que la page ne défilera pas à la valeur fournie initialement pour des raisons d'accessibilité. Seuls les changements ultérieurs liés aux variables `scrollX` et `scrollY` déclencheront le défilement. Cependant, si un défilement initial est tout de même nécessaire, vous pouvez utiliser `scrollTo()` dans `onMount()`.
## `<svelte:document>` ## `<svelte:document>`
```svelte ```svelte
<svelte:document on:event={handler} /> <svelte:document on:event={handler}/>
``` ```
```svelte ```svelte
<svelte:document bind:prop={value} /> <svelte:document bind:prop={value}/>
``` ```
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on `document`. À l'instar de `<svelte:window>`, cet élément vous permet d'ajouter des gestionnaires d'évènement sur `document`, comme `visibilitychange`, qui n'est pas déclenché sur `window`. Cet élément vous permet aussi d'utiliser des [actions](/docs/element-directives#use-action) sur `document`.
As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element. Comme pour `<svelte:window>`, cet élément peut uniquement être utilisé à la racine du <span class="vo">[markup](/docs/web#markup)</span> de votre composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
```svelte ```svelte
<svelte:document on:visibilitychange={handleVisibilityChange} use:someAction /> <svelte:document
on:visibilitychange={handleVisibilityChange}
use:someAction
/>
``` ```
You can also bind to the following properties: Vous pouvez aussi lier (avec `:bind`) les propriétés suivantes:
- `fullscreenElement` * `fullscreenElement`
- `visibilityState` * `visibilityState`
All are readonly. Elles sont toutes en lecture seule.
## `<svelte:body>` ## `<svelte:body>`
```svelte ```svelte
<svelte:body on:event={handler} /> <svelte:body on:event={handler}/>
``` ```
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element. À l'instar de `<svelte:window>`, cet élément vous permet d'ajouter des fonctions d'écoute pour les évènements se produisant sur le `document.body`, comme `mouseenter` et `mouseleave`, qui ne se déclenchent pas sur `window`. Cela permet également d'utiliser des [actions](/docs/element-directives#use-action) sur l'élément `<body>`.
As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
Comme pour `<svelte:window>` et `<svelte:document>`, cet élément peut uniquement être placé à la racine du <span class="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
```svelte ```svelte
<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} use:someAction /> <svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
use:someAction
/>
``` ```
## `<svelte:head>` ## `<svelte:head>`
```svelte ```svelte
<svelte:head>...</svelte:head> <svelte:head>...</svelte:head>
``` ```
This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content. Cet élément rend possible l'insertion d'éléments dans `document.head`. Lors d'un rendu côté serveur, le contenu de `head` est exposé séparément du contenu `html`.
As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element. Comme pour `<svelte:window>`, `<svelte:document>` et `<svelte:body>`, cet élément peut uniquement être placé à la racine du <span class="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
```svelte ```svelte
<svelte:head> <svelte:head>
<title>Hello world!</title> <link rel="stylesheet" href="/tutorial/dark-theme.css">
<meta name="description" content="This is where the description goes for SEO" />
</svelte:head> </svelte:head>
``` ```
## `<svelte:options>` ## `<svelte:options>`
```svelte ```svelte
<svelte:options option={value} /> <svelte:options option={value}/>
``` ```
The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/svelte-compiler#compile). The possible options are: L'élément `<svelte:options>` permet de fournir à un composant des options de compilation spécifiques, dont le détail est fourni dans [la section Compilation](/docs/svelte-compiler#compile).
Les options disponibles sont:
- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed * `immutable={true}` — vous n'utilisez aucune donnée mutable, le compilateur peut donc se contenter d'effectuer des vérifications d'égalité par référence pour déterminer si des valeurs ont changé
- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed * `immutable={false}` — utilisé par défaut. Svelte sera plus conservatif pour vérifier si des objets mutables ont changé
- `accessors={true}` — adds getters and setters for the component's props * `accessors={true}` — ajoute des <span class="vo">[getters](/docs/development#getter-setter)</span> et <span class="vo">[setters](/docs/development#getter-setter)</span> aux <span class="vo">[props](/docs/sveltejs#props)</span> d'un composant
- `accessors={false}` — the default * `accessors={false}` — utilisé par défaut
- `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings * `namespace="..."` — le <span class="vo">[namespace](/docs/development#namespace)</span> où ce composant sera utilisé, le plus souvent "svg" ; utilisez le <span class="vo">[namespace](/docs/development#namespace)</span> "foreign" pour désactiver l'insensibilité à la casse des noms d'attributs ainsi que les avertissements spécifiques au HTML
- `customElement="..."` — the name to use when compiling this component as a custom element * `tag="..."` — le nom à utiliser à la compilation de ce composant en <span class="vo">[web component](/docs/web#web-component)</span>
```svelte ```svelte
<svelte:options customElement="my-custom-element" /> <svelte:options tag="my-custom-element"/>
``` ```
## `<svelte:fragment>` ## `<svelte:fragment>`
The `<svelte:fragment>` element allows you to place content in a [named slot](/docs/special-elements#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact. L'élément `<svelte:fragment>` permet de placer du contenu dans un [slot nommé](/docs/special-elements#slot-slot-name-name) sans l'encadrer par un élément <span class="vo">[DOM](/docs/web#dom)</span> supplémentaire. Cela permet de garder la structure de votre document intacte.
```svelte ```svelte
<!-- Widget.svelte --> <!-- Widget.svelte -->
<div> <div>
<slot name="header">No header was provided</slot> <slot name="header">Aucun en-tête fourni</slot>
<p>Some content between header and footer</p> <p>Du contenu entre l'en-tête et le bas de page</p>
<slot name="footer" /> <slot name="footer"></slot>
</div> </div>
<!-- App.svelte --> <!-- App.svelte -->
<Widget> <Widget>
<h1 slot="header">Hello</h1> <HeaderComponent slot="header" />
<svelte:fragment slot="footer"> <svelte:fragment slot="footer">
<p>All rights reserved.</p> <p>Tous droits réservés.</p>
<p>Copyright (c) 2019 Svelte Industries</p> <p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment> </svelte:fragment>
</Widget> </Widget>
``` ```

4
documentation/docs/07-glossary/01-development.md
Unescape View File

@ -104,6 +104,10 @@ Vous trouverez plus de détails sur les [getters](https://developer.mozilla.org/
> Bientôt... > Bientôt...
## Thread
> Bientôt...
## Template ## Template
> Bientôt... > Bientôt...

Write Preview
Loading…
Cancel
Save