SvelteAnciennes APIs

<slot>

Avec Svelte 5, du contenu peut être passé aux composants sous le forme de snippets et affiché en utilisant des balises render.

En mode legacy, le contenu dans les balises de composant est considéré comme du contenu slotté, qui peut être affiché par le composant en utilisant un élément <slot> :

App

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

<Modal>Ceci est du contenu slotté</Modal>

<script lang="ts">
	import Modal from './Modal.svelte';
</script>

<Modal>Ceci est du contenu slotté</Modal>

Modal

<div class="modal">
	<slot></slot>
</div>

Si vous souhaitez afficher un élément <slot> standard, vous pouvez utiliser <svelte:element this={'slot'} />.

Slots nommés

Un composant peut avoir des slots nommés en plus du slot par défaut. Du côté du parent, ajoutez un attribut slot="..." à un élément, composant ou <svelte:fragment>, au sein de la balise.

App

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

	let open = true;
</script>

{#if open}
	<Modal>
		Ceci est du contenu slotté

		<div slot="buttons">
			<button on:click={() => open = false}>
				fermer
			</button>
		</div>
	</Modal>
{/if}

<script lang="ts">
	import Modal from './Modal.svelte';

	let open = true;
</script>

{#if open}
	<Modal>
		Ceci est du contenu slotté

		<div slot="buttons">
			<button on:click={() => open = false}>
				fermer
			</button>
		</div>
	</Modal>
{/if}

Du côté de l’enfant, ajoutez un élément <slot name="..."> correspondant :

Modal

<div class="modal">
	<slot></slot>
	<hr>
	<slot name="buttons"></slot>
</div>

Contenu par défaut

Si aucun contenu slotté n’est fourni, un composant peut définir du contenu par défaut en le déclarant dans l’élément <slot> :

<slot>
	Ceci sera affiché si aucun contenu slotté n'est fourni
</slot>

Fournir des données à du contenu slotté

Un même slot peut être affiché zéro ou plusieurs fois, et peut remonter des valeurs au parent en utilisant des props. Le parent expose ces valeurs au template de slot en utilisant la directive let:.

FancyList

<ul>
	{#each items as data}
		<li class="fancy">
			<!-- le `item` ici... -->
			<slot item={process(data)} />
		</li>
	{/each}
</ul>

App

<!-- ... correspond au `item` ici : -->
<FancyList {items} let:item={processed}>
	<div>{processed.text}</div>
</FancyList>

Les règles classiques de raccourci de syntaxe — let:item est équivalent à let:item={item}, et <slot {item}> est équivalent à <slot item={item}>.

Les slots nommés peuvent également exposer des valeurs. La directive let: doit se positionner sur l’élément possédant l’attribut slot.

FancyList

<ul>
	{#each items as item}
		<li class="fancy">
			<slot name="item" item={process(data)} />
		</li>
	{/each}
</ul>

<slot name="footer" />

App

<FancyList {items}>
	<div slot="item" let:item>{item.text}</div>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>

Modifier cette page sur Github

précédent suivant

on: $$slots