SColorPicker <s-color-picker>

色を視覚的に選ぶためのコントロール。 SColorPicker は、Shopify Polaris の <s-color-picker> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 現在の色から始める。 マーチャントが既存の色を編集するときは、value にその色を設定し、迷わずに何から変更するのかを確認できるようにします。
• 色をコンテキストの中でプレビューする。 可能であれば、選んだ色をボタンなど影響を受ける対象に適用した状態で、ピッカーの横に表示します。
• 正確な値には SColorField と組み合わせる。 ピッカーは見た目で選ぶのに適しており、カラーフィールドではマーチャントが正確な 16 進数の値を入力できます。

詳しいガイダンスについては、<s-color-picker> に関する Shopify のベストプラクティス（英語）を参照してください。

例

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

<SColorPicker> の v-model は value プロパティにバインドされ、input DOM イベントを監視します。

<SColorPicker v-model="value" />

これは次と同等です：

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

Props

Prop	型	説明
alpha	boolean	カラーピッカーでアルファ（透明度）チャンネルの選択を有効にし、ユーザーが半透明の色を選べるようにするかどうか。
defaultValue	string	フィールドが最初に読み込まれたときの初期の色の値です。placeholder とは異なり、これはユーザーが編集でき、フォームとともに送信される実際の値です。ユーザーが操作を始めると、その入力で置き換えられます。フィールドの読み込み後にこのプロパティを変更しても効果はありません。フィールドの値をいつでも更新するには、代わりに value を使用してください。
id	string	要素の一意な識別子です。
name	string	最も近い親のフォーム内で一意となる、フィールドの識別子です。
value	string	現在選択されている色の値です。複数の入力形式を受け付けます: - Hex: #RGB、#RRGGBB、#RRGGBBAA（3、6、または 8 桁） - RGB/RGBA: rgb(255, 0, 0) または rgb(255 0 0)（カンマ区切りまたはスペース区切り） - HSL/HSLA: hsl(0, 100%, 50%) または hsl(0 100% 50%) 値が無効な場合は空文字列を返します。change イベントは常に hex 形式で値を発行します。

Events

Event	型
change	Event
input	Event

これらのイベントは <SColorPicker> 上で @change 形式のリスナーで受け取れます。