Création d'un sélecteur de couleurs interactif avec Svelte 5

Création d'un sélecteur de couleurs interactif avec Svelte 5

Svelte 5 offre un moyen élégant et efficace de créer des applications Web interactives, et un sélecteur de couleurs est un exemple parfait pour démontrer ses capacités. Dans cet article de blog, nous explorerons comment créer un sélecteur de couleurs interactif à l'aide de Svelte 5, en nous concentrant sur un extrait de code simple mais fonctionnel.

code complet

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

Comprendre la structure du code

Le code fourni crée une interface de sélecteur de couleurs où les utilisateurs peuvent choisir parmi un ensemble de couleurs prédéfinies. Voici comment cela fonctionne :

1. SVG Image Import : Le composant commence par importer un fichier SVG, qui sera affiché à côté de la couleur sélectionnée. Ce repère visuel améliore l’expérience utilisateur.

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

1. Color Array : Un tableau de couleurs est défini à l'aide de $state, ce qui permet une gestion réactive de l'état dans Svelte.

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

1. État de remplissage actuel : une autre variable d'état de remplissage assure le suivi de l'index de couleur actuellement sélectionné.

   let fillings = $state(0);

1. Effect Hook : La fonction $effect enregistre la valeur actuelle des remplissages sur la console, permettant aux développeurs de suivre les modifications en temps réel.

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

1. Rendu de l'interface utilisateur : L'interface utilisateur est construite en utilisant une combinaison de chaque bloc et un rendu conditionnel. Pour chaque couleur du tableau, un bouton est créé. Lorsqu'un bouton est cliqué, il met à jour l'état des remplissages pour refléter l'index sélectionné. La couleur sélectionnée est mise en évidence par une icône 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. Entrée couleur : Un élément d'entrée de couleur permet aux utilisateurs de personnaliser la couleur sélectionnée. Il est lié à la couleur actuellement sélectionnée, garantissant que les modifications sont immédiatement reflétées dans l'interface utilisateur.

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

Améliorer l'expérience utilisateur

Avec cette configuration simple, les utilisateurs peuvent facilement choisir une couleur et les commentaires en temps réel améliorent l'engagement. L'icône SVG fournit une représentation visuelle de la couleur sélectionnée, rendant l'interface plus intuitive.

Conclusion

La création d'un sélecteur de couleurs interactif dans Svelte 5 est un processus simple qui met en valeur les atouts du framework en matière de réactivité et de simplicité. Cet exemple peut servir de base à des applications plus complexes, permettant aux développeurs de s'appuyer sur cette fonctionnalité de base avec des fonctionnalités supplémentaires, telles que l'enregistrement des préférences de couleur ou l'intégration avec des outils de conception. Avec Svelte, les possibilités sont infinies, ce qui en fait un choix fantastique pour le développement Web moderne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!