Markup de base

Modifier cette page sur Github

Balisespermalink

Une balise en minuscules, comme <div>, indique un élément HTML standard. Une balise avec la première lettre en majuscule, comme <Widget> ou <Namespace.Widget>, indique un composant.

<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget />
</div>

Attributs et propspermalink

Par défaut, les attributs fonctionnent exactement comme leur équivalent HTML.

<div class="foo">
	<button disabled>pas touche</button>
</div>

Comme en HTML, les valeurs peuvent être fournies sans guillemets.

<input type=checkbox />

Les valeurs des attributs peuvent contenir des expressions JavaScript.

<a href="page/{p}">page {p}</a>

Ou elles peuvent être définies par des expressions JavaScript.

<button disabled={!clickable}>...</button>

Les attributs booléens sont inclus sur l'élément si leur valeur est truthy et exclus si leur valeur est falsy.

Tous les autres attributs sont inclus à moins que leur valeur soit nullish.

<input required={false} placeholder="Ce champ input n'est pas requis" />
<div title={null}>Cette div n'a pas de titre</div>

Une expression peut éventuellement inclure des caractères qui casseraient la mise en valeur de la syntaxe dans du HTML classique, en conséquence il est permis de mettre la valeur en guillemets. Les guillemets n'ont pas d'influence sur le parsing de la valeur.

<button disabled="{number !== 42}">...</button>

Quand le nom d'un attribut et sa valeur sont identiques, (name={name}), il est possible d'écrire {name}.

<button {disabled}>...</button>
<!-- est équivalent à
<button disabled={disabled}>...</button>
-->

Par convention, les valeurs passées aux composants sont appelées propriétés ou props plutôt qu'attributs, caractéristiques du DOM.

Comme pour les éléments, name={name} peut être raccourci en {name}.

<Widget foo={bar} answer={42} text="salut" />

Les attributs décomposés (spread attributes) permettent de passer de nombreux attributs ou propriétés d'un seul coup.

Un élément ou un composant peut avoir plusieurs attributs décomposés, parsemés ou non d'attributs classiques.

<Widget {...things} />

La variable $$props référence toutes les props qui sont fournies à un composant, y compris celles qui ne sont pas déclarées avec export. Utiliser $$props ne sera pas aussi performant qu'utiliser une prop spécifique directement car les changements de n'importe quelle prop vont déclencher une nouvelle vérification de toutes les occurences de $$props. Toutefois $$props peut être utile dans certains cas — par exemple, lorsque vous ne savez pas à la compilation quelles props peuvent être passées au composant.

<Widget {...$$props} />

La variable $$restProps contient uniquement les props qui ne sont pas déclarées avec export. Elle peut être utilisée pour relayer des attributs inconnus à un élément dans un composant plus profond. restProps souffre des mêmes problématiques de performance que $$props comparé à un accès direct à une prop.

<input {...$$restProps} />

L'attribut value d'un élément input ou ses éléments enfants de type option ne doivent pas être utilisés avec des attributs décomposés lorsque bind:group ou bind:checked est utilisé. Dans ce cas, Svelte doit être capable d'accéder à la value de l'élément directement dans le markup, afin de la relier à la variable correspondante.

Parfois, l'ordre des attributs est important car Svelte gère les attributs séquentiellement dans JavaScript. Dans l'exemple <input type="range" min="0" max="1" value={0.5} step="0.1"/>, Svelte va essayer d'attribuer 1 à la valeur (arrondissant 0.5 à 1 car le pas par défaut est 1), puis va mettre le pas à 0.1. Pour régler ce problème, utilisez plutôt <input type="range" min="0" max="1" step="0.1" value={0.5}/>.

Un autre exemple est <img src="..." loading="lazy" />. Svelte va essayer d'attribuer la src de l'image avant d'appliquer loading="lazy" à l'élément <img>, ce qui arrive trop tard. Pour profiter du lazy loading, utilisez plutôt <img loading="lazy" src="...">.

Expressions textepermalink

Une expression JavaScript peut être incluse en tant que texte en l'entourant avec des accolades.

{expression}

Des accolades peuvent être incluses dans un template Svelte en utilisant leur entité HTML sous forme de chaîne de caractères : {, {, ou { pour { et }, }, ou } pour }.

Si vous utilisez la notation littérale des expressions régulières (RegExp), vous devrez l'entourer de parenthèses.

<h1>Bonjour {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

Commentairespermalink

Vous pouvez utiliser des commentaires HTML à l'intérieur des composants.

<!-- quel beau commentaire ! --><h1>Bonjour tout le monde</h1>

Les commentaires qui commencent par svelte-ignore désactivent les avertissements du prochain bloc de markup. En général, ce sont des avertissements d'accessibilité ; essayez de ne les désactiver que pour une bonne raison.

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus />