ColorPicker 색상 선택기

다양한 인터랙션 방법으로 색을 고를 수 있게 해 줘요.

출처: 문서

본문

언제 사용하나요

사용자가 여러 가지 인터랙션 방법으로 색을 선택할 수 있게 해 줘요.

기본 사용법

:::demo

<template>
  <d-color-picker></d-color-picker>
</template>

:::

색상 투명도

alpha 모드 표시 여부를 동적으로 조절할 수 있고, 기본값은 true예요.

:::demo

<template>
  <d-button variant="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
  <d-color-picker v-model="color" :show-alpha="show"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
  setup() {
    const show = ref(true)
    const color = ref('rgba(83, 199, 212, 0.72)')
    const isShowAlpha = () => {
      show.value = !show.value
    }
    return {
      color,
      isShowAlpha,
      show
    }
  }
})
</script>

:::

색상 모드

mode를 설정하면 대응하는 색상 모드로 표시해요.

:::demo

<template>
  <d-color-picker v-model="color" mode="hex"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
  setup() {
    const color = ref('#FF6827A1')
    return {
      color
    }
  }
})
</script>

:::

히스토리 색상

히스토리 색상 표시 여부를 직접 정할 수 있고, 기본값은 true예요.

:::demo

<template>
  <d-button variant="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
  <d-color-picker :show-history="show" v-model="color" mode="hsl"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
  setup() {
    let show = ref(true)
    const isShowAlpha = () => {
      show.value = !show.value
    }
    const color = ref('hsla(353, 1, 0.58, 1)')
    return {
      color,
      isShowAlpha,
      show
    }
  }
})
</script>

:::

기본 패널 커스터마이즈

기본 패널에 넣을 색상 견본을 직접 설정할 수 있어요.

:::demo

<template>
  <d-color-picker :swatches="colors" v-model="color"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
  setup() {
    const colors = [
      '#f44336',
      '#e91e63',
      '#9c27b0',
      '#673ab7',
      '#3f51b5',
      '#2196f3',
      '#03a9f4',
      '#00bcd4',
      '#009688',
      '#4caf50'
    ]
    const color = ref('rgba(155, 39, 176, 1)')
    return {
      color,
      colors
    }
  }
})
</script>

:::

ColorPicker 파라미터

더 알아보기 (Learn more)

mode로 hex·rgb·hsl·hsv 색상 모드를 바꾸고, swatches로 자주 쓰는 색 견본 패널을 직접 구성할 수 있어요. show-alpha와 show-history로 투명도 바와 최근 사용 색 표시 여부도 조절해요.