SColorPicker <s-color-picker>

Un control visual para elegir un color. SColorPicker es el wrapper de Vue 3 tipado del web component <s-color-picker> de Shopify Polaris.

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

Buenas prácticas

• Parte del color actual. Cuando los comerciantes editen un color existente, define value con ese color para que no pierdan la referencia y vean desde qué color parten.
• Previsualiza el color en contexto. Siempre que puedas, muestra junto al selector el color elegido aplicado a lo que afecta, como un botón.
• Combínalo con SColorField para valores exactos. El selector sirve para elegir visualmente, mientras que un campo de color permite a los comerciantes escribir un valor hexadecimal preciso.

Consulta las buenas prácticas de Shopify para <s-color-picker> (en inglés) para ver todas las recomendaciones.

Ejemplo

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 en <SColorPicker> se vincula a la propiedad value y escucha el event DOM input.

<SColorPicker v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
alpha	boolean	Si se habilita la selección del canal alfa (transparencia) en el selector de color, lo que permite a los usuarios elegir colores semitransparentes.
defaultValue	string	El valor de color inicial cuando el campo se carga por primera vez. A diferencia de placeholder, es un valor real que el usuario puede editar y que se envía con el formulario. En cuanto el usuario empieza a interactuar, su entrada lo reemplaza. Cambiar esta propiedad después de que el campo se haya cargado no tiene efecto. Para actualizar el valor del campo en cualquier momento, usa value.
id	string	Un identificador único para el elemento.
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
value	string	El valor de color seleccionado actualmente. Acepta varios formatos de entrada: - Hex: #RGB, #RRGGBB, #RRGGBBAA (3, 6 u 8 dígitos) - RGB/RGBA: rgb(255, 0, 0) o rgb(255 0 0) (separados por comas o espacios) - HSL/HSLA: hsl(0, 100%, 50%) o hsl(0 100% 50%) Devuelve una cadena vacía si el valor no es válido. El evento change siempre emite valores en formato hexadecimal.

Events

Event	Tipo
change	Event
input	Event

Escúchalos con listeners del estilo @change en <SColorPicker>.