Mencipta Pemilih Warna Interaktif dengan Svelte 5

Mencipta Pemilih Warna Interaktif dengan Svelte 5

Svelte 5 menawarkan cara yang elegan dan cekap untuk membina aplikasi web interaktif, dan pemilih warna ialah contoh yang sempurna untuk menunjukkan keupayaannya. Dalam catatan blog ini, kami akan meneroka cara membuat pemilih warna interaktif menggunakan Svelte 5, memfokuskan pada coretan kod yang ringkas tetapi berfungsi.

kod penuh

<script>
    import Svg from '../lib/assets/circle.svg';
    let colors = $state(['#BBFF00', '#06F586', '#ff3e00', '#8D462E', '#FF0037']);

    let fillings = $state(0);

    $effect(() => {
        console.log(fillings);
    });
</script>

<div>
    <div class="flex gap-2 mb-4">
        {#each colors as color, index}
            <div class="flex flex-col gap-2">
                <button
                    onclick={() => (fillings = index)}
                    style:background={colors[index]}
                    class="w-24 h-24 mb-3 rounded-full"
                >
                    {#if index === fillings}
                        <img src={Svg} alt={index.toString()} />
                    {/if}
                </button>
                <span>
                    <code>
                        {colors[index]}
                    </code>
                </span>
            </div>
        {/each}
    </div>
    <input bind:value={colors[fillings]} type="color" name="color" />
</div>

Memahami Struktur Kod

Kod yang disediakan mencipta antara muka pemilih warna yang membolehkan pengguna memilih daripada set warna yang dipratentukan. Begini cara ia berfungsi:

1. Import Imej SVG: Komponen bermula dengan mengimport fail SVG, yang akan dipaparkan di sebelah warna yang dipilih. Petunjuk visual ini meningkatkan pengalaman pengguna.

   import Svg from '../lib/assets/circle.svg';

1. Susun Warna: Tatasusunan warna ditakrifkan menggunakan $state, yang membenarkan pengurusan keadaan reaktif dalam Svelte.

   let colors = $state(['#BBFF00', '#06F586', '#ff3e00', '#8D462E', '#FF0037']);

1. Keadaan Pengisian Semasa: Satu lagi pengisian pembolehubah keadaan menjejaki indeks warna yang dipilih pada masa ini.

   let fillings = $state(0);

1. Effect Hook: Fungsi $effect merekodkan nilai semasa pengisian ke konsol, membolehkan pembangun menjejaki perubahan dalam masa nyata.

   $effect(() => {
       console.log(fillings);
   });

1. Memaparkan UI: UI dibina menggunakan gabungan setiap blok dan pemaparan bersyarat. Untuk setiap warna dalam tatasusunan, butang dicipta. Apabila butang diklik, ia mengemas kini keadaan pengisian untuk mencerminkan indeks yang dipilih. Warna yang dipilih diserlahkan dengan ikon SVG.

   {#each colors as color, index}
       <button onclick={() => (fillings = index)} style:background={colors[index]} class="w-24 h-24 mb-3 rounded-full">
           {#if index === fillings}
               <img src={Svg} alt={index.toString()} />
           {/if}
       </button>
   {/each}

1. Input Warna: Elemen input warna membolehkan pengguna menyesuaikan warna yang dipilih. Ia terikat pada warna yang dipilih pada masa ini, memastikan perubahan mencerminkan serta-merta dalam UI.

   <input bind:value={colors[fillings]} type="color" name="color" />

Meningkatkan Pengalaman Pengguna

Dengan persediaan mudah ini, pengguna boleh memilih warna dengan mudah dan maklum balas masa nyata meningkatkan penglibatan. Ikon SVG menyediakan perwakilan visual warna yang dipilih, menjadikan antara muka lebih intuitif.

Kesimpulan

Mencipta pemilih warna interaktif dalam Svelte 5 ialah proses mudah yang mempamerkan kekuatan rangka kerja dalam kereaktifan dan kesederhanaan. Contoh ini boleh berfungsi sebagai asas untuk aplikasi yang lebih kompleks, membolehkan pembangun membina kefungsian asas ini dengan ciri tambahan, seperti menyimpan pilihan warna atau menyepadukan dengan alatan reka bentuk. Dengan Svelte, kemungkinannya tidak berkesudahan, menjadikannya pilihan yang hebat untuk pembangunan web moden.

Atas ialah kandungan terperinci Mencipta Pemilih Warna Interaktif dengan Svelte 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!