Pada umumnya, slot adalah fitur yang paling penting dalam pengembangan aplikasi Svelte. Dalam artikel ini, kita akan membahas bagaimana cara membuat slot dan mengirimkan data ke dalamnya.

Menggunakan Hoverable sebagai Contoh

Contoh pertama adalah menggunakan komponen Hoverable yang telah tersedia di Svelte. Komponen ini memiliki fitur hover yang memungkinkan Anda untuk menampilkan teks yang berbeda ketika pengguna menghover mouse ke dalamnya.

<!-- Hoverable.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>

Dalam contoh di atas, kita menggunakan atribut on:mouseenter dan on:mouseleave untuk menghandle event hover. Kemudian, kita menggunakan <slot> tag untuk menampilkan konten yang sesuai dengan kondisi hover.

Menggunakan Data dalam Slot

Selanjutnya, kita akan membahas bagaimana cara mengirimkan data ke dalam slot. Dalam contoh di atas, kita telah mendefinisikan atribut hovering pada komponen Hoverable. Sekarang, kita ingin menggunakan data tersebut untuk menampilkan teks yang sesuai.

<!-- App.svelte -->
<script>
 import Hoverable from './Hoverable.svelte';

 let active = false;

 function toggleActive() {
 active = !active;
 }
</script>

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

Dalam contoh di atas, kita menggunakan atribut let untuk mengirimkan data active ke dalam slot. Kemudian, kita menggunakan direktif #if dan {#if} untuk menampilkan teks yang sesuai dengan kondisi hover.

** Kesimpulan**

Dalam artikel ini, kita telah membahas bagaimana cara membuat slot dan mengirimkan data ke dalamnya di Svelte. Dengan menggunakan komponen Hoverable sebagai contoh, kita dapat melihat bagaimana cara menghandle event hover dan mengirimkan data ke dalam slot. Selanjutnya, kita akan membahas bagaimana cara menggunaan data tersebut untuk menampilkan teks yang sesuai.

Referensi

• Svelte Tutorial: Slots
• Svelte Tutorial: Slot Fallbacks
• Svelte Tutorial: Named Slots
• Svelte Tutorial: Slot Props