4. Directives de classe
Attribuer des classes n'a jamais été aussi simple
Les directives d'éléments sont des attributs spéciaux que vous pouvez utiliser sur vos éléments HTML, et permettant certaines fonctionnalités de Svelte.
<!-- Ici la directive de type "type" et de nom "nom" est appliquée à l'élément div avec la valeur
"valeur" -->
<div type:nom={valeur} />
<script>
const isActive = true;
</script>
<!-- Ces deux écritures sont équivalentes -->
<div class={isActive ? 'active' : ''}>...</div>
<div class:active={isActive}>...</div>
Si le nom de la classe est le même que celui de la variable, vous accès à un raccourci :
<script>
const active = true;
</script>
<div class:active>...</div>
<!-- Le nom de classe est le même que celui de la variable -->
Vous pouvez tout à fait appliquer plusieurs classes sur un même élément de cette manière.
<div class:active class:inactive={!active} class:isAdmin>...</div>
Il existe d'autres directives utiles, on les verra plus tard.