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. 現在の充填状態: 別の状態変数の充填は、現在選択されているカラー インデックスを追跡します。

   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 中国語 Web サイトの他の関連記事を参照してください。