Svelte – Slot Props

---

HoverableComp.svelte

<script>
	let hovering;

	function enter() {
		hovering = true;
	}

	function leave() {
		hovering = false;
	}
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
	<slot hovering={hovering}></slot>
</div>

Hoverable.svelte

<script>
	import HoverableComp from './components/HoverableComp.svelte';
</script>

<HoverableComp let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</HoverableComp>

<HoverableComp let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</HoverableComp>

<HoverableComp let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</HoverableComp>

<style>
	div {
		padding: 1em;
		margin: 0 0 1em 0;
		background-color: #eee;
	}

	.active {
		background-color: #ff3e00;
		color: white;
	}
</style>

App.svelte

	<Box/>
	<ContactCard>
		<span slot="name">
			P. Sherman
		</span>
	
		<span slot="address">
			42 Wallaby Way<br>
			Sydney
		</span>
	</ContactCard>
	<Hoverable />

dan hasilnya akan seperti ini…

Okay berhasil ya… link github ada disini …. cyaaa….