使用 Svelte 5 建立互動式顏色選擇器

使用 Svelte 5 建立互動式顏色選擇器

Svelte 5 提供了一種優雅而高效的方式來建立互動式 Web 應用程序，而顏色選擇器是展示其功能的完美範例。在這篇文章中，我們將探索如何使用 Svelte 5 建立互動式顏色選擇器，並專注於簡單但實用的程式碼片段。

完整程式碼

<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>

了解程式碼結構

提供的程式碼建立了一個顏色選擇器介面，使用者可以從一組預先定義的顏色中進行選擇。其工作原理如下：

1. SVG 影像匯入：該元件首先匯入 SVG 文件，該文件將顯示在所選顏色旁邊。這種視覺提示增強了使用者體驗。

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

1. 顏色數組：使用 $state 定義顏色數組，它允許在 Svelte 中進行反應式狀態管理。

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

1. 目前填滿狀態：另一個狀態變數filling 追蹤目前選定的顏色索引。

   let fillings = $state(0);

1. Effect Hook：$effect 函數將填充物的目前值記錄到控制台，讓開發者即時追蹤變化。

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

1. 渲染 UI：UI 是使用每個區塊和條件渲染的組合建構的。對於數組中的每種顏色，都會建立一個按鈕。單擊按鈕時，它會更新填充狀態以反映所選索引。所選顏色以 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. 顏色輸入：顏色輸入元素允許使用者自訂所選顏色。它綁定到目前選擇的顏色，確保變更立即反映在 UI 中。

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

提升使用者體驗

透過這個簡單的設置，使用者可以輕鬆選擇顏色，即時回饋增強了參與度。 SVG 圖示提供了所選顏色的視覺表示，使介面更加直觀。

結論

在 Svelte 5 中建立互動式顏色選擇器是一個簡單的過程，展示了該框架在反應性和簡單性方面的優勢。此範例可以作為更複雜應用程式的基礎，允許開發人員在此基本功能的基礎上添加附加功能，例如保存顏色首選項或與設計工具整合。 Svelte 擁有無限的可能性，使其成為現代 Web 開發的絕佳選擇。

以上是使用 Svelte 5 建立互動式顏色選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！