Slots Svelte — Svelte

Slots memungkinkan komponen menerima konten dari parent — seperti children di React. Default Slot Konten di dalam card Fallback Content Konten default jika koso

Slots memungkinkan komponen menerima konten dari parent — seperti children di React.

Default Slot

<!-- Card.svelte -->
<div class="card">
  <slot />
</div>

<!-- Penggunaan -->
<Card>
  <p>Konten di dalam card</p>
</Card>

Fallback Content

<slot>Konten default jika kosong</slot>

Named Slots

<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>

<!-- Penggunaan -->
<Layout>
  <h1 slot="header">Judul</h1>
  <p>Konten utama</p>
  <p slot="footer">Footer text</p>
</Layout>

Slot Props

<!-- List.svelte -->
{#each items as item, i}
  <slot {item} index={i} />
{/each}

Yang akan kamu pelajari