Comment appliquer dynamiquement CSS dans Svelte

J'ai eu le besoin d'appliquer dynamiquement certainsCSSpropriétés à un élément, utilisationSvelte, lorsqu'une de ses variables avait une valeur particulière.

La solution la plus simple que j'ai trouvée était d'ajouter une classe HTML lorsque leselectedla valeur de la variable étaittrue, puis j'ai écrit du CSS qui ciblait cet élément avec la classe:

<style>
  /* ...other CSS... */
  span.cell.selected {
    outline-color: lightblue;
    outline-style: dotted;
  }
</style>

<span class=“cell {selected === true ? ‘selected’ : ‘’}”> {value} </span>

Ce type de besoin est si courant que Svelte a ajouté la possibilité de lier le nom de la classe à une valeur de variable:

<span class="cell" class:selected="{selected}">
  {value}
</span>

et de manière plus concise, en utilisant la notation abrégée:

<span class="cell" class:selected>
  {value}
</span>

Téléchargez mon gratuitManuel de Svelte


Plus de tutoriels sveltes: