SColorPicker <s-color-picker>

Một điều khiển trực quan để chọn màu. SColorPicker là Vue 3 wrapper có type cho web component <s-color-picker> của Shopify Polaris.

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

Best practices

• Bắt đầu từ màu hiện tại. Khi người bán chỉnh sửa một màu có sẵn, hãy đặt value là màu đó để họ không bị mất phương hướng và thấy được họ đang thay đổi từ màu nào.
• Xem trước màu trong ngữ cảnh. Khi có thể, hãy hiển thị màu đã chọn áp dụng lên thứ nó ảnh hưởng, chẳng hạn một button, ngay cạnh picker.
• Kết hợp với SColorField để nhập giá trị chính xác. Picker phù hợp để chọn bằng mắt, còn color field cho phép người bán nhập một giá trị hex chính xác.

Xem best practices của Shopify cho <s-color-picker> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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 trên <SColorPicker> gắn với property value và lắng nghe DOM event input.

<SColorPicker v-model="value" />

tương đương với:

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

Props

Prop	Kiểu	Mô tả
alpha	boolean	Có bật lựa chọn kênh alpha (độ trong suốt) trong color picker hay không, cho phép người dùng chọn màu bán trong suốt.
defaultValue	string	Giá trị màu ban đầu khi trường được tải lần đầu. Khác với placeholder, đây là một giá trị thật mà người dùng có thể chỉnh sửa và được gửi đi cùng form. Khi người dùng bắt đầu tương tác, dữ liệu họ nhập sẽ thay thế giá trị này. Thay đổi thuộc tính này sau khi trường đã tải không có tác dụng. Để cập nhật giá trị của trường bất cứ lúc nào, hãy dùng value.
id	string	Định danh duy nhất của phần tử.
name	string	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
value	string	Giá trị màu đang được chọn. Chấp nhận nhiều định dạng đầu vào: - Hex: #RGB, #RRGGBB, #RRGGBBAA (3, 6 hoặc 8 chữ số) - RGB/RGBA: rgb(255, 0, 0) hoặc rgb(255 0 0) (phân tách bằng dấu phẩy hoặc dấu cách) - HSL/HSLA: hsl(0, 100%, 50%) hoặc hsl(0 100% 50%) Trả về chuỗi rỗng nếu giá trị không hợp lệ. Event change luôn phát giá trị ở định dạng hex.

Events

Event	Kiểu
change	Event
input	Event

Lắng nghe các event này bằng listener dạng @change trên <SColorPicker>.