Svelte 5 でインタラクティブなカラーピッカーを作成する-jsチュートリアル-php.cn

Svelte 5 でインタラクティブなカラーピッカーを作成する

Barbara Streisand

リリース： 2024-10-23 12:09:02

オリジナル

904 人が閲覧しました

Creating an Interactive Color Picker with 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>

ログイン後にコピー

コード構造を理解する

提供されたコードは、ユーザーが事前定義された色のセットから選択できるカラーピッカーインターフェイスを作成します。仕組みは次のとおりです:

SVG 画像インポート: コンポーネントは、選択した色の横に表示される SVG ファイルをインポートすることから始まります。この視覚的な手がかりにより、ユーザーエクスペリエンスが向上します。

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

ログイン後にコピー

カラー配列: 色の配列は $state を使用して定義され、Svelte でのリアクティブな状態管理が可能になります。

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

ログイン後にコピー

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

   let fillings = $state(0);

ログイン後にコピー

Effect Hook: $effect 関数はフィリングの現在の値をコンソールに記録し、開発者がリアルタイムで変更を追跡できるようにします。

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

ログイン後にコピー

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}

ログイン後にコピー

カラー入力: カラー入力要素を使用すると、ユーザーは選択した色をカスタマイズできます。現在選択されている色にバインドされており、変更が UI に即座に反映されます。

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

ログイン後にコピー

ユーザーエクスペリエンスの向上

このシンプルな設定により、ユーザーは簡単に色を選択でき、リアルタイムのフィードバックによりエンゲージメントが高まります。 SVG アイコンは選択した色を視覚的に表現し、インターフェイスをより直感的にします。

結論

Svelte 5 でのインタラクティブなカラーピッカーの作成は、反応性とシンプルさにおけるフレームワークの強みを示す簡単なプロセスです。この例は、より複雑なアプリケーションの基盤として機能し、開発者がこの基本機能に基づいて、色の設定の保存やデザインツールとの統合などの追加機能を構築できるようになります。 Svelte の可能性は無限であり、現代の Web 開発にとって素晴らしい選択肢となります。

以上がSvelte 5 でインタラクティブなカラーピッカーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。