使用 Svelte 5 建立互動(dòng)式顏色選擇器

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

完整程式碼

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

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

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

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

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

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

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

   let fillings = $state(0);

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

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

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

提升使用者體驗(yàn)

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

結(jié)論

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

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