SColorPicker <s-color-picker>

Um controle visual para escolher uma cor. SColorPicker é o wrapper de Vue 3 tipado do web component <s-color-picker> do Shopify Polaris.

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

Boas práticas

• Comece pela cor atual. Quando os lojistas editarem uma cor existente, defina value com ela para que eles não percam a referência e vejam o que estão alterando.
• Mostre a cor no contexto. Sempre que possível, mostre ao lado do seletor a cor escolhida aplicada ao que ela afeta, como um botão.
• Combine-o com SColorField para valores exatos. O seletor é bom para escolher visualmente, enquanto um campo de cor permite que os lojistas digitem um valor hexadecimal preciso.

Veja as boas práticas da Shopify para <s-color-picker> (em inglês) para todas as recomendações.

Exemplo

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 em <SColorPicker> se vincula à propriedade value e escuta o event DOM input.

<SColorPicker v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descrição
alpha	boolean	Se a seleção do canal alfa (transparência) deve ser habilitada no seletor de cores, permitindo que os usuários escolham cores semitransparentes.
defaultValue	string	O valor de cor inicial quando o campo é carregado pela primeira vez. Ao contrário de placeholder, este é um valor real que o usuário pode editar e que é enviado com o formulário. Assim que o usuário começa a interagir, a entrada dele o substitui. Alterar esta propriedade depois que o campo é carregado não tem efeito. Para atualizar o valor do campo a qualquer momento, use value.
id	string	Um identificador exclusivo para o elemento.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
value	string	O valor de cor selecionado no momento. Aceita vários formatos de entrada: - Hex: #RGB, #RRGGBB, #RRGGBBAA (3, 6 ou 8 dígitos) - RGB/RGBA: rgb(255, 0, 0) ou rgb(255 0 0) (separados por vírgula ou espaço) - HSL/HSLA: hsl(0, 100%, 50%) ou hsl(0 100% 50%) Retorna uma string vazia se o valor for inválido. O evento change sempre emite valores em formato hexadecimal.

Events

Event	Tipo
change	Event
input	Event

Escute-os com listeners no estilo @change em <SColorPicker>.