Bases de Svelte
Introduction
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Lorsque vous construisez des interfaces utilisateur, vous avez souvent besoin de travailler avec des
listes de données. Dans cet exercice, nous avons répété le markup du <button> plusieurs fois — en
changeant la couleur à chaque fois — mais il en reste d’autres à ajouter.
Plutôt que copier, coller, modifier laborieusement, nous pouvons nous débarrasser de tout sauf du
premier bouton, puis nous servir d’un bloc #each :
App
<div>
{#each colors as color}
<button
style="background: red"
aria-label="red"
aria-current={selected === 'red'}
onclick={() => selected = 'red'}
></button>
{/each}
</div>L’expression (
colorsdans ce cas) peut être n’importe quel itérable ou objet de type tableau — autrement dit, tout ce qui est compatible avecArray.from.
Il nous reste à utiliser la variable color au lieu de "red" :
App
<div>
{#each colors as color}
<button
style="background: {color}"
aria-label={color}
aria-current={selected === color}
onclick={() => selected = color}
></button>
{/each}
</div>Vous pouvez obtenir l’indice courant en deuxième argument, comme ceci :
App
<div>
{#each colors as color, i}
<button
style="background: {color}"
aria-label={color}
aria-current={selected === color}
onclick={() => selected = color}
>{i + 1}</button>
{/each}
</div>Modifier cette page sur Github
précédent suivant
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let selected = $state(colors[0]);
</script>
<h1 style="color: {selected}">Choisissez une couleur</h1><div>
<button
style="background: red"
aria-label="red"
aria-current={selected === 'red'} onclick={() => selected = 'red'}></button>
<button
style="background: orange"
aria-label="orange"
aria-current={selected === 'orange'} onclick={() => selected = 'orange'}></button>
<button
style="background: yellow"
aria-label="yellow"
aria-current={selected === 'yellow'} onclick={() => selected = 'yellow'}></button>
<!-- TODO ajouter le reste des couleurs -->
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<style>
h1 {font-size: 2rem;
font-weight: 700;
transition: color 0.2s;
}
div {display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
max-width: 400px;
}
button {aspect-ratio: 1;
border-radius: 50%;
background: var(--color, #fff);
transform: translate(-2px,-2px);
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
transition: all 0.1s;
color: black;
font-weight: 700;
font-size: 2rem;
}
button[aria-current="true"] {transform: none;
filter: none;
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
}
</style>