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

Svelte 5 提供了一種優(yōu)雅而高效的方式來建立互動式 Web 應(yīng)用程序，而顏色選擇器是展示其功能的完美範例。在這篇文章中，我們將探索如何使用 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>

了解程式碼結(jié)構(gòu)

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

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

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

1. 顏色數(shù)組：使用 $state 定義顏色數(shù)組，它允許在 Svelte 中進行反應(yīng)式狀態(tài)管理。

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

1. 目前填滿狀態(tài)：另一個狀態(tài)變數(shù)filling 追蹤目前選定的顏色索引。

   let fillings = $state(0);

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

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

1. 渲染 UI：UI 是使用每個區(qū)塊和條件渲染的組合建構(gòu)的。對於數(shù)組中的每種顏色，都會建立一個按鈕。單擊按鈕時，它會更新填充狀態(tài)以反映所選索引。所選顏色以 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" />

提升使用者體驗

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

結(jié)論

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

以上是使用 Svelte 5 建立互動式顏色選擇器的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！