class

Il y a deux manières de définir des classes sur les éléments : l’attribut class, et la directive class:.

Attributs

Les valeurs primitives sont traitées comme n’importe quel autre attribut :

<div class={large ? 'large' : 'small'}>...</div>

For des raisons historiques, les valeurs falsy (comme false ou NaN) sont stringifiées (class="false"), alors que class={undefined} (ou null) provoquent l’omission de l’attribut. Dans une version future de Svelte, toutes les valeurs falsy vont provoquer l’omission de class.

Objets et tableaux

Depuis Svelte 5.16, class peut être un objet ou un tableau, et sera convertie en chaîne de caractères en utilisant clsx.

Si la valeur est un objet, les clés truthy sont ajoutées :

<script>
	let { cool } = $props();
</script>

<!-- results in `class="cool"` if `cool` is truthy,
	 `class="lame"` otherwise -->
<!-- devient `classs="cool"` si `cool` est truthy,
		` class="lame"	 sinon -->
<div class={{ cool, lame: !cool }}>...</div>

Si la valeur est un tableau, les valeurs truthy sont combinées :

<!-- si `faded` et `large` sont toutes les deux truthy,
		devient `class="saturate-0 opacity-50 scale-200"` -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>

Notez que peu importe si vous utilisez la forme tableau ou la forme objet, vous pouvez définir plusieurs classes en même temps avec une seule condition, ce qui est particulièrement utile si vous utilisez des outils comme Tailwind.

Les tableaux peuvent contenir des tableaux et des objets, et clsx se chargera de les “aplatir”. Ceci est utile pour combiner les classes locales avec des props, par exemple :

<script>
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>

<script lang="ts">
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>

Le consommateur du composant ci-dessus peut utiliser tout aussi bien un mélange d’objets, de tableaux et de chaînes de caractères :

<script>
	import Button from './Button.svelte';
	let useTailwind = $state(false);
</script>

<Button
	onclick={() => useTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
	Accepter que Tailwind est incontournable
</Button>

<script lang="ts">
	import Button from './Button.svelte';
	let useTailwind = $state(false);
</script>

<Button
	onclick={() => useTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
	Accepter que Tailwind est incontournable
</Button>

La directive class:

Avant Svelte 5.16, la directive class: était la manière la plus efficace de définir des classes de manière conditionnelle sur des éléments.

<!-- ces écritures sont équivalentes -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>

Comme pour les autres directives, il est possible d’utiliser une syntaxe raccourcie lorsque le nom de la classe coïncide avec la valeur :

<div class:cool class:lame={!cool}>...</div>

À moins que vous n’utilisiez une version ancienne de Svelte, il est recommandé d’éviter class:, puisque la syntaxe d’attribut est plus puissante et plus flexible.