Bases de Svelte
Introduction
Liaisons
Classes et styles
Svelte avancé
Réutiliser du contenu
Mouvements
Liaisons avancées
Transitions avancées
API de contexte
Éléments spéciaux
<script module>
Next steps
Bases de SvelteKit
Introduction
Routing
Chargement de données
En-têtes et cookies
Modules partagés
Formulaires
$app/state
Erreurs et redirections
SvelteKit avancé
Options de page
Options de lien
Routing avancé
Chargement avancé
Variables d’environnement
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>