SColorPicker <s-color-picker>

Ein visuelles Steuerelement zur Auswahl einer Farbe. SColorPicker ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-color-picker>.

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

Best Practices

• Von der aktuellen Farbe ausgehen. Wenn Händler eine bestehende Farbe bearbeiten, setzen Sie value darauf, damit sie die Orientierung behalten und den Ausgangswert ihrer Änderung sehen.
• Farbe im Kontext anzeigen. Zeigen Sie die gewählte Farbe nach Möglichkeit neben dem Picker an dem Element, das sie betrifft, etwa einem Button.
• Mit SColorField für exakte Werte kombinieren. Der Picker eignet sich für die visuelle Auswahl, während ein Farbfeld Händlern die Eingabe eines genauen Hex-Werts ermöglicht.

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-color-picker> (auf Englisch).

Beispiel

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 auf <SColorPicker> bindet die Property value und lauscht auf das DOM-Event input.

<SColorPicker v-model="value" />

entspricht:

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

Props

Prop	Typ	Beschreibung
alpha	boolean	Ob im Farbwähler die Auswahl des Alphakanals (Transparenz) aktiviert ist, sodass Benutzer halbtransparente Farben wählen können.
defaultValue	string	Der anfängliche Farbwert beim ersten Laden des Feldes. Anders als placeholder ist dies ein echter Wert, den der Benutzer bearbeiten kann und der mit dem Formular übermittelt wird. Sobald der Benutzer interagiert, ersetzt seine Eingabe diesen Wert. Eine Änderung dieser Eigenschaft nach dem Laden des Feldes hat keine Wirkung. Um den Feldwert jederzeit zu aktualisieren, verwenden Sie stattdessen value.
id	string	Eine eindeutige Kennung für das Element.
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
value	string	Der aktuell ausgewählte Farbwert. Akzeptiert mehrere Eingabeformate: - Hex: #RGB, #RRGGBB, #RRGGBBAA (3, 6 oder 8 Stellen) - RGB/RGBA: rgb(255, 0, 0) oder rgb(255 0 0) (durch Kommas oder Leerzeichen getrennt) - HSL/HSLA: hsl(0, 100%, 50%) oder hsl(0 100% 50%) Gibt bei ungültigem Wert einen leeren String zurück. Das Event change liefert Werte immer im Hex-Format.

Events

Event	Typ
change	Event
input	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @change auf <SColorPicker>.