SColorPicker <s-color-picker>

색상을 선택하는 시각적 컨트롤입니다. SColorPicker은(는) Shopify Polaris <s-color-picker> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 현재 색상에서 시작하세요. 판매자가 기존 색상을 편집할 때 value를 그 색상으로 설정하면, 기준을 잃지 않고 무엇에서 바꾸는지 확인할 수 있습니다.
• 맥락 속에서 색상을 미리 보여 주세요. 가능하다면 선택한 색상을 버튼처럼 실제로 적용되는 대상에 입혀 picker 옆에 보여 줍니다.
• 정확한 값이 필요하면 SColorField와 함께 사용하세요. picker는 시각적으로 고르는 데 적합하고, color field는 판매자가 정확한 hex 값을 입력할 수 있게 해 줍니다.

전체 가이드는 <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 property에 바인딩되고 input DOM event를 수신합니다.

<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 형식의 리스너로 이 events를 수신하세요.