SColorPicker <s-color-picker>

Un contrôle visuel pour choisir une couleur. SColorPicker est le wrapper Vue 3 typé du web component <s-color-picker> de Shopify Polaris.

import { SColorPicker } from 'polaris-vue-elements'

Bonnes pratiques

• Partez de la couleur actuelle. Lorsque les marchands modifient une couleur existante, définissez value sur celle-ci pour qu'ils gardent leurs repères et voient ce qu'ils modifient.
• Prévisualisez la couleur en contexte. Lorsque c'est possible, montrez à côté du sélecteur la couleur choisie appliquée à ce qu'elle concerne, comme un bouton.
• Associez-le à SColorField pour les valeurs exactes. Le sélecteur permet de choisir visuellement, tandis qu'un champ de couleur permet aux marchands de saisir une valeur hexadécimale précise.

Consultez les bonnes pratiques de Shopify pour <s-color-picker> (en anglais) pour l'ensemble des recommandations.

Exemple

Value: #008060

<script setup>
import { ref } from 'vue'
import { SColorPicker } from 'polaris-vue-elements'

const value = ref('#008060')
</script>

<template>
  <SColorPicker v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model sur <SColorPicker> est lié à la propriété value et écoute l'event DOM input.

<SColorPicker v-model="value" />

équivaut à :

<SColorPicker :value="value" @input="value = $event.target.value" />

Props

Prop	Type	Description
alpha	boolean	Indique s'il faut activer la sélection du canal alpha (transparence) dans le sélecteur de couleur, permettant aux utilisateurs de choisir des couleurs semi-transparentes.
defaultValue	string	La valeur de couleur initiale au premier chargement du champ. Contrairement à placeholder, il s'agit d'une vraie valeur, modifiable par l'utilisateur et soumise avec le formulaire. Dès que l'utilisateur commence à interagir, sa saisie la remplace. Modifier cette propriété après le chargement du champ n'a aucun effet. Pour mettre à jour la valeur du champ à tout moment, utilisez plutôt value.
id	string	Un identifiant unique pour l'élément.
name	string	Un identifiant du champ, unique au sein du formulaire parent le plus proche.
value	string	La couleur actuellement sélectionnée. Accepte plusieurs formats d'entrée : - Hex : #RGB, #RRGGBB, #RRGGBBAA (3, 6 ou 8 chiffres) - RGB/RGBA : rgb(255, 0, 0) ou rgb(255 0 0) (séparés par des virgules ou des espaces) - HSL/HSLA : hsl(0, 100%, 50%) ou hsl(0 100% 50%) Renvoie une chaîne vide si la valeur est invalide. L'événement change émet toujours des valeurs au format hexadécimal.

Events

Event	Type
change	Event
input	Event

Écoutez-les avec des listeners de la forme @change sur <SColorPicker>.