ColorPickerPanel

ColorPickerPanel (색상 선택 패널)

출처: 문서

본문

ColorPickerPanel beta

ColorPickerPanel은 ColorPicker의 핵심 컴포넌트예요.

기본 사용법

ColorPickerPanel은 v-model에 바인딩될 string 타입 변수가 필요해요.

Alpha

ColorPickerPanel은 알파 채널 선택을 지원해요. 알파 선택을 활성화하려면 show-alpha 속성을 추가하면 돼요.

사전 정의된 색상

ColorPickerPanel은 사전 정의된 색상 옵션을 지원해요.

테두리

기본적으로 color-picker-panel은 테두리가 있지만, 어떤 경우에는 테두리를 원하지 않을 수도 있어요.

import { computed, ref } from 'vue'
import { useElementSize } from '@vueuse/core'

const value = ref('#ff6900')
const containerRef = ref()

const { width } = useElementSize(containerRef)

const isNarrow = computed(() => width.value

비활성화

disabled 속성이 색상 선택기가 완전히 비활성화되는지 결정해요.

API

Attributes

Slots

Exposes

더 알아보기 (Learn more)