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

Examples (#48)

Browse Source 
* docs: add examples 00 to 04

* add examples 05

* add examples 06

* add examples 07

* add examples 08

* add examples 09

* add examples 10

* add examples 11

* add examples 12

* add examples 13

* add examples 14

* add examples 15

* add examples 16

* add examples 17

* add examples 18

* add examples 19-20

* add examples 21

* forgot flight booker

---------

Co-authored-by: Romain Crestey <romain.crestey@radiofrance.com>
pull/9156/head
Romain l'Ourson 3 years ago committed by Romain Crestey
parent c429f91681
commit 95cda04fac
134 changed files with 371 additions and 332 deletions
Show Stats Download Patch File Download Diff File

4
documentation/examples/05-bindings/00-text-inputs/App.svelte
Unescape View File

@ -2,5 +2,5 @@
let name = '';
</script>
<input bind:value={name} placeholder="enter your name" />
<p>Hello {name || 'stranger'}!</p>
<input bind:value={name} placeholder="tapez votre nom" />
<p>Bonjour {name || 'étranger'} !</p>

2
documentation/examples/05-bindings/00-text-inputs/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Text inputs"
"title": "Inputs texte"
}

2
documentation/examples/05-bindings/01-numeric-inputs/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Numeric inputs"
"title": "Inputs numériques"
}

8
documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
Unescape View File

@ -4,13 +4,13 @@
<label>
<input type="checkbox" bind:checked={yes} />
Yes! Send me regular email spam
Oui ! Envoyez-moi du courrier indésirable
</label>
{#if yes}
<p>Thank you. We will bombard your inbox and sell your personal details.</p>
<p>Merci. Nous allons bombarder votre boite mail et vendre vos données personnelles.</p>
{:else}
<p>You must opt-in to continue. If you're not paying, you're the product.</p>
<p>Vous devez accepter pour continuer. Si vous ne payez pas, vous êtes le produit.</p>
{/if}
<button disabled={!yes}> Subscribe </button>
<button disabled={!yes}> S'abonner </button>

2
documentation/examples/05-bindings/02-checkbox-inputs/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Checkbox inputs"
"title": "Inputs checkbox"
}

34
documentation/examples/05-bindings/03-group-inputs/App.svelte
Unescape View File

@ -1,49 +1,49 @@
<script>
let scoops = 1;
let flavours = ['Mint choc chip'];
let flavours = ['Éclats de menthe'];
let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
function join(flavours) {
if (flavours.length === 1) return flavours[0];
return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
}
</script>
<h2>Size</h2>
<h2>Nombre de boules</h2>
<label>
<input type="radio" bind:group={scoops} value={1} />
One scoop
<input type="radio" bind:group={scoops} name="scoops" value={1} />
Une boule
</label>
<label>
<input type="radio" bind:group={scoops} value={2} />
Two scoops
<input type="radio" bind:group={scoops} name="scoops" value={2} />
Deux boules
</label>
<label>
<input type="radio" bind:group={scoops} value={3} />
Three scoops
<input type="radio" bind:group={scoops} name="scoops" value={3} />
Trois boules
</label>
<h2>Flavours</h2>
<h2>Parfums</h2>
{#each menu as flavour}
<label>
<input type="checkbox" bind:group={flavours} value={flavour} />
<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
{flavour}
</label>
{/each}
{#if flavours.length === 0}
<p>Please select at least one flavour</p>
<p>Veuillez choisir au moins un parfum</p>
{:else if flavours.length > scoops}
<p>Can't order more flavours than scoops!</p>
<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
{:else}
<p>
You ordered {scoops}
{scoops === 1 ? 'scoop' : 'scoops'}
of {join(flavours)}
Vous avez commandé {scoops}
{scoops === 1 ? 'boule' : 'boules'}
de {join(flavours)}
</p>
{/if}

2
documentation/examples/05-bindings/03-group-inputs/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Group inputs"
"title": "Inputs groupés"
}

6
documentation/examples/05-bindings/04-textarea-inputs/App.svelte
Unescape View File

@ -1,11 +1,11 @@
<script>
import { marked } from 'marked';
let text = `Some words are *italic*, some are **bold**`;
let value = `Certains mots sont en *italique*, d'autres sont en **gras**`;
</script>
<textarea bind:value={text} />
{@html marked(value)}
{@html marked(text)}
<textarea bind:value />
<style>
textarea {

2
documentation/examples/05-bindings/04-textarea-inputs/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Textarea inputs"
"title": "Inputs de zone de texte"
}

14
documentation/examples/05-bindings/05-file-inputs/App.svelte
Unescape View File

@ -2,25 +2,25 @@
let files;
$: if (files) {
// Note that `files` is of type `FileList`, not an Array:
// https://developer.mozilla.org/en-US/docs/Web/API/FileList
// Notez que `files` est de type `FileList`, ce n'est pas un tableau :
// https://developer.mozilla.org/fr/docs/Web/API/FileList
console.log(files);
for (const file of files) {
console.log(`${file.name}: ${file.size} bytes`);
console.log(`${file.name}: ${file.size} octets`);
}
}
</script>
<label for="avatar">Upload a picture:</label>
<label for="avatar">Sélectionnez une image :</label>
<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
<label for="many">Upload multiple files of any type:</label>
<label for="many">Sélectionnez plusieurs images de n'importe quel type :</label>
<input bind:files id="many" multiple type="file" />
{#if files}
<h2>Selected files:</h2>
<h2>Images sélectionnées :</h2>
{#each Array.from(files) as file}
<p>{file.name} ({file.size} bytes)</p>
<p>{file.name} ({file.size} octets)</p>
{/each}
{/if}

2
documentation/examples/05-bindings/05-file-inputs/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "File inputs"
"title": "Inputs de fichiers"
}

17
documentation/examples/05-bindings/06-select-bindings/App.svelte
Unescape View File

@ -1,8 +1,11 @@
<script>
let questions = [
{ id: 1, text: `Where did you go to school?` },
{ id: 2, text: `What is your mother's name?` },
{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
{ id: 1, text: `Où alliez-vous à l'école ?` },
{ id: 2, text: `Quel est le nom de jeune de fille de votre mère ?` },
{
id: 3,
text: `Donnez-nous un autre élément personnel qu'une personne mal intentionnée pourrait facilement trouver sur Google`
}
];
let selected;
@ -10,11 +13,11 @@
let answer = '';
function handleSubmit() {
alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
alert(`la réponse à la question ${selected.id} (${selected.text}) est "${answer}"`);
}
</script>
<h2>Insecurity questions</h2>
<h2>Questions de non-sécurité</h2>
<form on:submit|preventDefault={handleSubmit}>
<select bind:value={selected} on:change={() => (answer = '')}>
@ -27,10 +30,10 @@
<input bind:value={answer} />
<button disabled={!answer} type="submit"> Submit </button>
<button disabled={!answer} type="submit"> Envoyer </button>
</form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p>
<p>question choisie {selected ? selected.id : '[en attente...]'}</p>
<style>
input {

2
documentation/examples/05-bindings/06-select-bindings/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Select bindings"
"title": "Liaisons de sélection"
}

24
documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
Unescape View File

@ -1,12 +1,12 @@
<script>
let scoops = 1;
let flavours = ['Mint choc chip'];
let flavours = ['Éclats de menthe'];
let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
function join(flavours) {
if (flavours.length === 1) return flavours[0];
return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
}
</script>
@ -14,20 +14,20 @@
<label>
<input type="radio" bind:group={scoops} value={1} />
One scoop
Une boule
</label>
<label>
<input type="radio" bind:group={scoops} value={2} />
Two scoops
Deux boules
</label>
<label>
<input type="radio" bind:group={scoops} value={3} />
Three scoops
Trois boules
</label>
<h2>Flavours</h2>
<h2>Parfums</h2>
<select multiple bind:value={flavours}>
{#each menu as flavour}
@ -38,13 +38,13 @@
</select>
{#if flavours.length === 0}
<p>Please select at least one flavour</p>
<p>Veuillez choisir au moins un parfum</p>
{:else if flavours.length > scoops}
<p>Can't order more flavours than scoops!</p>
<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
{:else}
<p>
You ordered {scoops}
{scoops === 1 ? 'scoop' : 'scoops'}
of {join(flavours)}
Vous avez commandé {scoops}
{scoops === 1 ? 'boule' : 'boules'}
de {join(flavours)}
</p>
{/if}

2
documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Select multiple"
"title": "Sélection multiple"
}

18
documentation/examples/05-bindings/08-each-block-bindings/App.svelte
Unescape View File

@ -1,8 +1,8 @@
<script>
let todos = [
{ done: false, text: 'finish Svelte tutorial' },
{ done: false, text: 'build an app' },
{ done: false, text: 'world domination' }
{ done: false, text: 'finir le tutoriel Svelte' },
{ done: false, text: 'construire une app' },
{ done: false, text: 'dominer le monde' }
];
function add() {
@ -22,12 +22,16 @@
<div>
<input type="checkbox" bind:checked={todo.done} />
<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
<input
placeholder="Qu'avez-vous besoin de faire ?"
bind:value={todo.text}
disabled={todo.done}
/>
</div>
{/each}
<p>{remaining} remaining</p>
<p>Encore {remaining}</p>
<button on:click={add}> Add new </button>
<button on:click={add}> Ajouter </button>
<button on:click={clear}> Clear completed </button>
<button on:click={clear}> Effacer les tâches complétées </button>

2
documentation/examples/05-bindings/08-each-block-bindings/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Each block bindings"
"title": "Liaisons de bloc each"
}

23
documentation/examples/05-bindings/09-media-elements/App.svelte
Unescape View File

@ -1,5 +1,5 @@
<script>
// These values are bound to properties of the video
// Ces valeurs sont liées aux propriétés de la vidéo
let time = 0;
let duration;
let paused = true;
@ -7,26 +7,27 @@
let showControls = true;
let showControlsTimeout;
// Used to track time of last mouse down event
// Utilisée pour suivre le timing du dernier évènement mousedown
let lastMouseDown;
function handleMove(e) {
// Make the controls visible, but fade out after
// 2.5 seconds of inactivity
// Rend les contrôles visibles, mais les estompe après
// 2.5 secondes d'inactivité
clearTimeout(showControlsTimeout);
showControlsTimeout = setTimeout(() => (showControls = false), 2500);
showControls = true;
if (!duration) return; // video not loaded yet
if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
if (!duration) return; // la vidéo n'est pas encore chargée
if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // la souris n'est pas encore enfoncée
const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
const { left, right } = this.getBoundingClientRect();
time = (duration * (clientX - left)) / (right - left);
}
// we can't rely on the built-in click event, because it fires
// after a drag — we have to listen for clicks ourselves
// nous ne pouvons pas nous fier à l'évènement clic natif,
// parce qu'il est déclenché après avoir fait glisser (drag) la souris
// — nous devons écouter les clics nous-mêmes
function handleMousedown(e) {
lastMouseDown = new Date();
}
@ -50,7 +51,7 @@
</script>
<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
<p>Par <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
<div>
<video
@ -72,7 +73,9 @@
<div class="info">
<span class="time">{format(time)}</span>
<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
<span
>cliquez n'importe où pour {paused ? 'lire' : 'mettre en pause'} / glissez pour chercher</span
>
<span class="time">{format(duration)}</span>
</div>
</div>

2
documentation/examples/05-bindings/09-media-elements/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Media elements"
"title": "Éléments media"
}

4
documentation/examples/05-bindings/10-dimensions/App.svelte
Unescape View File

@ -2,13 +2,13 @@
let w;
let h;
let size = 42;
let text = 'edit me';
let text = 'éditez-moi';
</script>
<input type="range" bind:value={size} />
<input bind:value={text} />
<p>size: {w}px x {h}px</p>
<p>taille: {w}px x {h}px</p>
<div bind:clientWidth={w} bind:clientHeight={h}>
<span style="font-size: {size}px">{text}</span>

4
documentation/examples/05-bindings/12-component-bindings/App.svelte
Unescape View File

@ -2,10 +2,10 @@
import Keypad from './Keypad.svelte';
let pin;
$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'entrez votre code';
function handleSubmit() {
alert(`submitted ${pin}`);
alert(`votre code ${pin}`);
}
</script>

4
documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
Unescape View File

@ -21,9 +21,9 @@
<button on:click={select(8)}>8</button>
<button on:click={select(9)}>9</button>
<button disabled={!value} on:click={clear}>clear</button>
<button disabled={!value} on:click={clear}>effacer</button>
<button on:click={select(0)}>0</button>
<button disabled={!value} on:click={submit}>submit</button>
<button disabled={!value} on:click={submit}>valider</button>
</div>
<style>

2
documentation/examples/05-bindings/12-component-bindings/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Component bindings"
"title": "Liaisons de composant"
}

2
documentation/examples/05-bindings/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Bindings"
"title": "Liaisons"
}

6
documentation/examples/06-lifecycle/00-onmount/App.svelte
Unescape View File

@ -9,7 +9,7 @@
});
</script>
<h1>Photo album</h1>
<h1>Album photo</h1>
<div class="photos">
{#each photos as photo}
@ -18,8 +18,8 @@
<figcaption>{photo.title}</figcaption>
</figure>
{:else}
<!-- this block renders when photos.length === 0 -->
<p>loading...</p>
<!-- ce bloc est affiché lorque photos.length === 0 -->
<p>chargement...</p>
{/each}
</div>

4
documentation/examples/06-lifecycle/01-ondestroy/App.svelte
Unescape View File

@ -6,7 +6,7 @@
</script>
<p>
The page has been open for
La page est ouverte depuis
{seconds}
{seconds === 1 ? 'second' : 'seconds'}
{seconds > 1 ? 'secondes' : 'seconde'}
</p>

2
documentation/examples/06-lifecycle/02-update/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "beforeUpdate and afterUpdate"
"title": "beforeUpdate et afterUpdate"
}

2
documentation/examples/06-lifecycle/03-tick/App.svelte
Unescape View File

@ -1,7 +1,7 @@
<script>
import { tick } from 'svelte';
let text = `Select some text and hit the tab key to toggle uppercase`;
let text = `Sélectionnez du texte et appuyez sur Tab pour mettre en majuscules`;
async function handleKeydown(event) {
if (event.key !== 'Tab') return;

2
documentation/examples/06-lifecycle/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Lifecycle"
"title": "Cycle de vie"
}

2
documentation/examples/07-stores/00-writable-stores/App.svelte
Unescape View File

@ -11,7 +11,7 @@
});
</script>
<h1>The count is {countValue}</h1>
<h1>Le compteur vaut {countValue}</h1>
<Incrementer />
<Decrementer />

2
documentation/examples/07-stores/00-writable-stores/Resetter.svelte
Unescape View File

@ -6,4 +6,4 @@
}
</script>
<button on:click={reset}> reset </button>
<button on:click={reset}> réinitialiser </button>

2
documentation/examples/07-stores/00-writable-stores/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Writable stores"
"title": "Stores d'écriture"
}

2
documentation/examples/07-stores/01-auto-subscriptions/App.svelte
Unescape View File

@ -5,7 +5,7 @@
import Resetter from './Resetter.svelte';
</script>
<h1>The count is {$count}</h1>
<h1>Le compteur vaut {$count}</h1>
<Incrementer />
<Decrementer />

2
documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
Unescape View File

@ -6,4 +6,4 @@
}
</script>
<button on:click={reset}> reset </button>
<button on:click={reset}> réinitialiser </button>

2
documentation/examples/07-stores/01-auto-subscriptions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Auto-subscriptions"
"title": "Abonnements automatiques"
}

4
documentation/examples/07-stores/02-readable-stores/App.svelte
Unescape View File

@ -1,7 +1,7 @@
<script>
import { time } from './stores.js';
const formatter = new Intl.DateTimeFormat('en', {
const formatter = new Intl.DateTimeFormat('fr', {
hour12: true,
hour: 'numeric',
minute: '2-digit',
@ -9,4 +9,4 @@
});
</script>
<h1>The time is {formatter.format($time)}</h1>
<h1>Il est {formatter.format($time)}</h1>

2
documentation/examples/07-stores/02-readable-stores/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Readable stores"
"title": "Stores de lecture"
}

6
documentation/examples/07-stores/03-derived-stores/App.svelte
Unescape View File

@ -9,10 +9,10 @@
});
</script>
<h1>The time is {formatter.format($time)}</h1>
<h1>Il est {formatter.format($time)}</h1>
<p>
This page has been open for
Cette page est ouverte depuis
{$elapsed}
{$elapsed === 1 ? 'second' : 'seconds'}
{$elapsed > 1 ? 'secondes' : 'seconde'}
</p>

2
documentation/examples/07-stores/03-derived-stores/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Derived stores"
"title": "Stores dérivés"
}

4
documentation/examples/07-stores/04-custom-stores/App.svelte
Unescape View File

@ -2,8 +2,8 @@
import { count } from './stores.js';
</script>
<h1>The count is {$count}</h1>
<h1>Le compteur vaut {$count}</h1>
<button on:click={count.increment}>+</button>
<button on:click={count.decrement}>-</button>
<button on:click={count.reset}>reset</button>
<button on:click={count.reset}>réinitialiser</button>

2
documentation/examples/07-stores/04-custom-stores/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Custom stores"
"title": "Stores personnalisés"
}

2
documentation/examples/08-motion/00-tweened/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Tweened"
"title": "Interpolation"
}

5
documentation/examples/08-motion/01-spring/App.svelte
Unescape View File

@ -14,17 +14,16 @@
<div style="position: absolute; right: 1em;">
<label>
<h3>stiffness ({coords.stiffness})</h3>
<h3>raideur ({coords.stiffness})</h3>
<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
</label>
<label>
<h3>damping ({coords.damping})</h3>
<h3>amortissement ({coords.damping})</h3>
<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
</label>
</div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<svg
on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
on:mousedown={() => size.set(30)}

2
documentation/examples/08-motion/01-spring/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Spring"
"title": "Ressorts"
}

2
documentation/examples/08-motion/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Motion"
"title": "Mouvement"
}

2
documentation/examples/09-transitions/00-transition/App.svelte
Unescape View File

@ -9,5 +9,5 @@
</label>
{#if visible}
<p transition:fade>Fades in and out</p>
<p transition:fade>Entre et sort en s'estompant</p>
{/if}

2
documentation/examples/09-transitions/00-transition/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "The transition directive"
"title": "La directive de transition"
}

2
documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
Unescape View File

@ -9,5 +9,5 @@
</label>
{#if visible}
<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
<p transition:fly={{ y: 200, duration: 2000 }}>Entre et sort en volant</p>
{/if}

2
documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Adding parameters"
"title": "Ajout de paramètres"
}

2
documentation/examples/09-transitions/02-in-and-out/App.svelte
Unescape View File

@ -9,5 +9,5 @@
</label>
{#if visible}
<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
<p in:fly={{ y: 200, duration: 2000 }} out:fade>Entre en volant, sort en s'estompant</p>
{/if}

2
documentation/examples/09-transitions/02-in-and-out/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "In and out"
"title": "In et out"
}

2
documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
Unescape View File

@ -29,7 +29,7 @@
{#if visible}
<div class="centered" in:spin={{ duration: 8000 }} out:fade>
<span>transitions!</span>
<span>transitionne !</span>
</div>
{/if}

2
documentation/examples/09-transitions/03-custom-css-transitions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Custom CSS transitions"
"title": "Transitions CSS personnalisées"
}

6
documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
Unescape View File

@ -5,7 +5,9 @@
const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
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 qui n'ont qu'un seul noeud enfant de type texte`
);
}
const text = node.textContent;
@ -27,5 +29,5 @@
</label>
{#if visible}
<p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
<p transition:typewriter>Portez ce vieux whisky au juge blond qui fume</p>
{/if}

2
documentation/examples/09-transitions/04-custom-js-transitions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Custom JS transitions"
"title": "Transitions JS personnalisées"
}

14
documentation/examples/09-transitions/05-transition-events/App.svelte
Unescape View File

@ -2,10 +2,10 @@
import { fly } from 'svelte/transition';
let visible = true;
let status = 'waiting...';
let status = 'en attente...';
</script>
<p>status: {status}</p>
<p>statut: {status}</p>
<label>
<input type="checkbox" bind:checked={visible} />
@ -15,11 +15,11 @@
{#if visible}
<p
transition:fly={{ y: 200, duration: 2000 }}
on:introstart={() => (status = 'intro started')}
on:outrostart={() => (status = 'outro started')}
on:introend={() => (status = 'intro ended')}
on:outroend={() => (status = 'outro ended')}
on:introstart={() => (status = `début de l'entrée`)}
on:outrostart={() => (status = 'début de la sortie')}
on:introend={() => (status = `fin de l'entrée`)}
on:outroend={() => (status = `fin de la sortie`)}
>
Flies in and out
Entre et sort en volant
</p>
{/if}

2
documentation/examples/09-transitions/05-transition-events/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Transition events"
"title": "Évènements de transition"
}

5
documentation/examples/09-transitions/06-deferred-transitions/App.svelte
Unescape View File

@ -29,7 +29,7 @@
<div class="container">
<div class="phone">
<h1>Photo gallery</h1>
<h1>Galerie photo</h1>
<div class="grid">
{#each images as image}
@ -48,8 +48,7 @@
{#if selected}
{#await selected then d}
<div class="photo" in:receive|global={{ key: d.id }} out:send|global={{ key: d.id }}>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<div class="photo" in:receive={{ key: d.id }} out:send={{ key: d.id }}>
<img alt={d.alt} src="{ASSETS}/{d.id}.jpg" on:click={() => (selected = null)} />
<p class="credit">

2
documentation/examples/09-transitions/06-deferred-transitions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Deferred transitions"
"title": "Transitions retardées"
}

18
documentation/examples/10-animations/00-animate/App.svelte
Unescape View File

@ -20,12 +20,12 @@
});
let todos = [
{ id: 1, done: false, description: 'write some docs' },
{ id: 2, done: false, description: 'start writing JSConf talk' },
{ id: 3, done: true, description: 'buy some milk' },
{ id: 4, done: false, description: 'mow the lawn' },
{ id: 5, done: false, description: 'feed the turtle' },
{ id: 6, done: false, description: 'fix some bugs' }
{ id: 1, done: false, description: 'écrire de la doc' },
{ id: 2, done: false, description: 'commencer ma près de JSTalk' },
{ id: 3, done: true, description: 'acheter du lait' },
{ id: 4, done: false, description: 'tondre la pelouse' },
{ id: 5, done: false, description: 'nourrir la tortue' },
{ id: 6, done: false, description: 'résoudre des bugs' }
];
let uid = todos.length + 1;
@ -49,12 +49,12 @@
<div class="board">
<input
class="new-todo"
placeholder="what needs to be done?"
placeholder="que dois-je faire ?"
on:keydown={(event) => event.key === 'Enter' && add(event.target)}
/>
<div class="left">
<h2>todo</h2>
<h2>à faire</h2>
{#each todos.filter((t) => !t.done) as todo (todo.id)}
<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
<input type="checkbox" bind:checked={todo.done} />
@ -65,7 +65,7 @@
</div>
<div class="right">
<h2>done</h2>
<h2>fait</h2>
{#each todos.filter((t) => t.done) as todo (todo.id)}
<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
<input type="checkbox" bind:checked={todo.done} />

2
documentation/examples/10-animations/00-animate/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "The animate directive"
"title": "La directive animate"
}

6
documentation/examples/11-easing/00-easing/Controls.svelte
Unescape View File

@ -16,7 +16,7 @@
<div class="easing-sidebar">
<div class="easing-types">
<h3>Ease</h3>
<h3>Lissage</h3>
{#if mobile}
<select bind:value={current_ease}>
{#each [...eases] as [name]}
@ -53,7 +53,7 @@
</ul>
{/if}
</div>
<h4>Duration</h4>
<h4>Durée</h4>
<div class="duration">
<span>
<input type="number" bind:value={duration} min="0" step="100" />
@ -61,7 +61,7 @@
<button class="number" on:click={() => (duration += 100)}>+</button>
</span>
<button class="play" on:click={() => dispatch('play')}>
{playing ? 'Restart' : 'Play'}
{playing ? 'Recommencer' : 'Jouer'}
</button>
</div>
</div>

2
documentation/examples/11-easing/00-easing/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Ease Visualiser"
"title": "Visualisateur de lissage"
}

2
documentation/examples/11-easing/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Easing"
"title": "Lissage"
}

12
documentation/examples/12-svg/01-clock/App.svelte
Unescape View File

@ -3,8 +3,8 @@
let time = new Date();
// these automatically update when `time`
// changes, because of the `$:` prefix
// ces valeurs changent automatiquement lorsque
// `time` change, grâce au préfixe `$:`
$: hours = time.getHours();
$: minutes = time.getMinutes();
$: seconds = time.getSeconds();
@ -23,7 +23,7 @@
<svg viewBox="-50 -50 100 100">
<circle class="clock-face" r="48" />
<!-- markers -->
<!-- marqueurs -->
{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
<line class="major" y1="35" y2="45" transform="rotate({30 * minute})" />
@ -32,13 +32,13 @@
{/each}
{/each}
<!-- hour hand -->
<!-- heures -->
<line class="hour" y1="2" y2="-20" transform="rotate({30 * hours + minutes / 2})" />
<!-- minute hand -->
<!-- minutes -->
<line class="minute" y1="4" y2="-30" transform="rotate({6 * minutes + seconds / 10})" />
<!-- second hand -->
<!-- secondes -->
<g transform="rotate({6 * seconds})">
<line class="second" y1="10" y2="-38" />
<line class="second-counterweight" y1="10" y2="2" />

2
documentation/examples/12-svg/01-clock/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Clock"
"title": "Horloge"
}

8
documentation/examples/12-svg/02-bar-chart/App.svelte
Unescape View File

@ -33,21 +33,21 @@
$: barWidth = innerWidth / xTicks.length;
</script>
<h2>US birthrate by year</h2>
<h2>Taux de natalité aux États-unis par année</h2>
<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
<svg>
<!-- y axis -->
<!-- axe y -->
<g class="axis y-axis">
{#each yTicks as tick}
<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
<line x2="100%" />
<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
<text y="-4">{tick} {tick === 20 ? ' pour 1 000 habitants' : ''}</text>
</g>
{/each}
</g>
<!-- x axis -->
<!-- axe x -->
<g class="axis x-axis">
{#each points as point, i}
<g class="tick" transform="translate({xScale(i)},{height})">

2
documentation/examples/12-svg/02-bar-chart/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Bar chart"
"title": "Graphique en barres"
}

18
documentation/examples/12-svg/03-area-chart/App.svelte
Unescape View File

@ -27,21 +27,21 @@
}
</script>
<h2>Arctic sea ice minimum</h2>
<h2>Épaisseur minimum de la calotte glacière en Arctique</h2>
<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
<svg>
<!-- y axis -->
<!-- axe y -->
<g class="axis y-axis" transform="translate(0, {padding.top})">
{#each yTicks as tick}
<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
<line x2="100%" />
<text y="-4">{tick} {tick === 8 ? ' million sq km' : ''}</text>
<text y="-4">{tick} {tick === 8 ? ' millions de km2' : ''}</text>
</g>
{/each}
</g>
<!-- x axis -->
<!-- axe x -->
<g class="axis x-axis">
{#each xTicks as tick}
<g class="tick tick-{tick}" transform="translate({xScale(tick)},{height})">
@ -51,15 +51,15 @@
{/each}
</g>
<!-- data -->
<!-- donnée -->
<path class="path-area" d={area} />
<path class="path-line" d={path} />
</svg>
</div>
<p>
Average September extent. Source: <a href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/"
>NSIDC/NASA</a
Étendue moyenne de septembre. Source: <a
href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/">NSIDC/NASA</a
>
</p>
@ -86,12 +86,12 @@
}
.tick line {
stroke: #888;
stroke: #aaa;
stroke-dasharray: 2;
}
.tick text {
fill: #888;
fill: #666;
text-anchor: start;
}

2
documentation/examples/12-svg/03-area-chart/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Area chart"
"title": "Graphique d'aire"
}

2
documentation/examples/12-svg/04-scatterplot/App.svelte
Unescape View File

@ -4,7 +4,7 @@
</script>
<div class="chart">
<h2>Anscombe's quartet</h2>
<h2>Quartet d'Anscombe</h2>
<Scatterplot points={data.a} />
<Scatterplot points={data.b} />

6
documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
Unescape View File

@ -32,7 +32,7 @@
<svelte:window on:resize={resize} />
<svg bind:this={svg}>
<!-- y axis -->
<!-- axe y -->
<g class="axis y-axis">
{#each yTicks as tick}
<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
@ -42,7 +42,7 @@
{/each}
</g>
<!-- x axis -->
<!-- axe x -->
<g class="axis x-axis">
{#each xTicks as tick}
<g class="tick" transform="translate({xScale(tick)},0)">
@ -52,7 +52,7 @@
{/each}
</g>
<!-- data -->
<!-- donnée -->
{#each points as point}
<circle cx={xScale(point.x)} cy={yScale(point.y)} r="5" />
{/each}

2
documentation/examples/12-svg/04-scatterplot/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Scatterplot"
"title": "Nuages de points"
}

4
documentation/examples/12-svg/05-svg-transitions/App.svelte
Unescape View File

@ -21,14 +21,14 @@
<div class="centered" out:fly={{ y: -20, duration: 800 }}>
{#each 'SVELTE' as char, i}
<span in:fade|global={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
<span in:fade={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
{/each}
</div>
{/if}
<label>
<input type="checkbox" bind:checked={visible} />
toggle me
activer
</label>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet" />

2
documentation/examples/12-svg/05-svg-transitions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "SVG transitions"
"title": "Transitions SVG"
}

6
documentation/examples/13-actions/00-actions/App.svelte
Unescape View File

@ -4,9 +4,11 @@
let showModal = true;
</script>
<button on:click={() => (showModal = true)}>Show Modal</button>
<button on:click={() => (showModal = true)}>Afficher la modale</button>
{#if showModal}
<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
Cliquez à l'extérieur !
</div>
{/if}
<style>

2
documentation/examples/13-actions/00-actions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "The use directive"
"title": "La directive use"
}

4
documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
Unescape View File

@ -13,9 +13,9 @@
<button
use:longpress={duration}
on:longpress={() => (pressed = true)}
on:mouseenter={() => (pressed = false)}>press and hold</button
on:mouseenter={() => (pressed = false)}>maintenez appuyé</button
>
{#if pressed}
<p>congratulations, you pressed and held for {duration}ms</p>
<p>félicitations, vous avez maintenu le bouton appuyé pendant {duration} ms</p>
{/if}

2
documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Adding parameters"
"title": "Ajout de paramètres"
}

2
documentation/examples/13-actions/03-actions-pannable/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "A more complex action"
"title": "Une action plus complexe"
}

2
documentation/examples/14-classes/00-classes/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "The class directive"
"title": "La directive de classe"
}

4
documentation/examples/14-classes/01-class-shorthand/App.svelte
Unescape View File

@ -4,11 +4,11 @@
<label>
<input type="checkbox" bind:checked={big} />
big
grand
</label>
<div class:big>
some {big ? 'big' : 'small'} text
un texte de {big ? 'grande' : 'petite'} taille
</div>
<style>

2
documentation/examples/14-classes/01-class-shorthand/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Shorthand class directive"
"title": "Directive de classe raccourcie"
}

4
documentation/examples/15-composition/00-slots/App.svelte
Unescape View File

@ -3,6 +3,6 @@
</script>
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
<h2>Bonjour !</h2>
<p>Ceci est une boîte. Elle peut contenir toutes sortes de choses.</p>
</Box>

4
documentation/examples/15-composition/01-slot-fallbacks/App.svelte
Unescape View File

@ -3,8 +3,8 @@
</script>
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
<h2>Bonjour !</h2>
<p>Ceci est une boîte. Elle peut contenir toutes sortes de choses.</p>
</Box>
<Box />

2
documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
Unescape View File

@ -1,6 +1,6 @@
<div class="box">
<slot>
<em>no content was provided</em>
<em>aucun contenu n'a été fourni</em>
</slot>
</div>

2
documentation/examples/15-composition/01-slot-fallbacks/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Slot fallbacks"
"title": "Slots par défaut"
}

6
documentation/examples/15-composition/02-named-slots/App.svelte
Unescape View File

@ -3,10 +3,10 @@
</script>
<ContactCard>
<span slot="name"> P. Sherman </span>
<span slot="name"> P. Dupont </span>
<span slot="address">
42 Wallaby Way<br />
Sydney
42 rue de la chocolatine<br />
Bordeaux
</span>
</ContactCard>

6
documentation/examples/15-composition/02-named-slots/ContactCard.svelte
Unescape View File

@ -1,19 +1,19 @@
<article class="contact-card">
<h2>
<slot name="name">
<span class="missing">Unknown name</span>
<span class="missing">Nom inconnu</span>
</slot>
</h2>
<div class="address">
<slot name="address">
<span class="missing">Unknown address</span>
<span class="missing">Adresse inconnue</span>
</slot>
</div>
<div class="email">
<slot name="email">
<span class="missing">Unknown email</span>
<span class="missing">e-mail inconnu</span>
</slot>
</div>
</article>

2
documentation/examples/15-composition/02-named-slots/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Named slots"
"title": "Slots nommés"
}

13
documentation/examples/15-composition/03-slot-props/App.svelte
Unescape View File

@ -5,9 +5,9 @@
<Hoverable let:hovering={active}>
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
<p>On me survole.</p>
{:else}
<p>Hover over me!</p>
<p>Survolez-moi !</p>
{/if}
</div>
</Hoverable>
@ -15,9 +15,9 @@
<Hoverable let:hovering={active}>
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
<p>On me survole.</p>
{:else}
<p>Hover over me!</p>
<p>Survolez-moi !</p>
{/if}
</div>
</Hoverable>
@ -25,9 +25,9 @@
<Hoverable let:hovering={active}>
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
<p>On me survole.</p>
{:else}
<p>Hover over me!</p>
<p>Survolez-moi !</p>
{/if}
</div>
</Hoverable>
@ -46,6 +46,5 @@
p {
pointer-events: none;
color: black;
}
</style>

2
documentation/examples/15-composition/03-slot-props/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Slot props"
"title": "Propriétés de slot"
}

6
documentation/examples/15-composition/04-conditional-slots/Profile.svelte
Unescape View File

@ -1,12 +1,12 @@
<section>
<div>Name</div>
<div>Nom</div>
<slot name="name" />
{#if $$slots.email}
<div>Email</div>
<div>e-mail</div>
<slot name="email" />
{/if}
{#if $$slots.phone}
<div>Phone</div>
<div>Téléphone</div>
<slot name="phone" />
{/if}
</section>

2
documentation/examples/15-composition/04-conditional-slots/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Conditional Slots"
"title": "Slots conditionnels"
}

47
documentation/examples/15-composition/05-modal/App.svelte
Unescape View File

@ -4,28 +4,53 @@
let showModal = false;
</script>
<button on:click={() => (showModal = true)}> show modal </button>
<button on:click={() => (showModal = true)}> afficher la modale </button>
<Modal bind:showModal>
<h2 slot="header">
modal
<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
<small><em>adjectif</em> mod·al \ˈmō-dəl\</small>
</h2>
<h3>Définitions</h3>
<ol class="definition-list">
<li>of or relating to modality in logic</li>
<li>qui concerne le mode des verbes</li>
<li>qui a rapport au mode en musique</li>
<li>
containing provisions as to the mode of procedure or the manner of taking effect —used of a
contract or legacy
se dit d'une musique employant d'autres échelles que les deux modes classiques majeur et
mineur (par opposition à tonal)
</li>
<li>of or relating to a musical mode</li>
<li>of or relating to structure as opposed to substance</li>
<li>
of, relating to, or constituting a grammatical form or category characteristically indicating
predication
auxiliaire ou verbe modal ou modal (nom masculin), verbe qui sert à exprimer les modalités
logiques de l'action (contingent vs nécessaire, probable vs possible, etc.).
</li>
<li>
classe modale, pour un caractère continu dont les valeurs sont groupées en classes de même
étendue, classe logique dont la fréquence est maximale
</li>
<li>
logique modale, système de logique qui comporte, en sus des connecteurs et quantificateurs de
la logique classique, deux opérateurs unaires de modalité, l'un pour la nécessité (« il est
nécessaire que… »), l'autre pour la possibilité (« il est possible que… »)
</li>
</ol>
<h3>Expressions</h3>
<ol class="expression-list">
<li>
auxiliaire ou verbe modal ou modal (nom masculin), verbe qui sert à exprimer les modalités
logiques de l'action (contingent vs nécessaire, probable vs possible, etc.).
</li>
<li>
classe modale, pour un caractère continu dont les valeurs sont groupées en classes de même
étendue, classe logique dont la fréquence est maximale
</li>
<li>
logique modale, système de logique qui comporte, en sus des connecteurs et quantificateurs de
la logique classique, deux opérateurs unaires de modalité, l'un pour la nécessité (« il est
nécessaire que… »), l'autre pour la possibilité (« il est possible que… »)
</li>
<li>of or relating to a statistical mode</li>
</ol>
<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
<a href="https://www.larousse.fr/dictionnaires/francais/modal/51904">larousse.fr</a>
</Modal>

7
documentation/examples/15-composition/05-modal/Modal.svelte
Unescape View File

@ -1,25 +1,24 @@
<script>
export let showModal; // boolean
export let showModal; // booléen
let dialog; // HTMLDialogElement
$: if (dialog && showModal) dialog.showModal();
</script>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<dialog
bind:this={dialog}
on:close={() => (showModal = false)}
on:click|self={() => dialog.close()}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation>
<slot name="header" />
<hr />
<slot />
<hr />
<!-- svelte-ignore a11y-autofocus -->
<button autofocus on:click={() => dialog.close()}>close modal</button>
<button autofocus on:click={() => dialog.close()}>fermer la modale</button>
</div>
</dialog>

2
documentation/examples/15-composition/05-modal/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Modal"
"title": "Modale"
}

2
documentation/examples/15-composition/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Component composition"
"title": "Composition de composants"
}

2
documentation/examples/16-context/00-context-api/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "setContext and getContext"
"title": "setContext et getContext"
}

2
documentation/examples/16-context/meta.json
Unescape View File

@ -1,3 +1,3 @@
{
"title": "Context API"
"title": "API de contexte"
}

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save