Color Picker

Пикер цвета с панелью насыщенности, слайдером оттенка, слайдером прозрачности, полем ввода hex и предустановленными цветами.

#3b82f6

<script setup>
import { ref } from 'vue'
const color = ref('#3b82f6')
</script>

<template>
  <VxColorPicker v-model="color" />
</template>

Without Input

<template>
  <VxColorPicker v-model="color" :show-input="false" />
</template>

With Alpha

#3b82f680

#3b82f680

<template>
  <VxColorPicker v-model="color" show-alpha />
</template>

Preset Colors

#ef4444

<script setup>
const presets = ['#000000', '#ef4444', '#f97316', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899']
</script>

<template>
  <VxColorPicker v-model="color" :presets="presets" />
</template>

RGB Format

rgb(59, 130, 246)

#3b82f6

<template>
  <VxColorPicker v-model="color" format="rgb" />
</template>

HSL Format

hsl(217, 91%, 60%)

#3b82f6

<template>
  <VxColorPicker v-model="color" format="hsl" />
</template>

Sizes

#8b5cf6

#8b5cf6

#8b5cf6

<template>
  <VxColorPicker size="sm" />
  <VxColorPicker />
  <VxColorPicker size="lg" />
</template>

Custom Trigger

Используйте triggerClass и triggerStyle, чтобы настроить высоту триггера, border-radius или любые другие стили.

#8b5cf6

#ef4444

#22c55e

<template>
  <VxColorPicker :trigger-style="{ height: '48px', borderRadius: '24px' }" />
  <VxColorPicker :trigger-style="{ height: '40px', borderRadius: '0px' }" />
  <VxColorPicker trigger-class="my-custom-trigger" />
</template>

Disabled

#f97316

<template>
  <VxColorPicker v-model="color" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	string	'#000000'	Значение цвета (v-model)
format	'hex' | 'rgb' | 'hsl'	'hex'	Формат вывода
disabled	boolean	false	Отключить пикер
showAlpha	boolean	false	Показывать слайдер альфа-канала
showInput	boolean	true	Показывать поле ввода hex
presets	string[]	—	Образцы предустановленных цветов
size	'sm' | 'default' | 'lg'	'default'	Размер триггера
triggerClass	string | string[] | Record<string, boolean>	''	Кастомный CSS-класс для триггера
triggerStyle	Record<string, string>	—	Inline-стили триггера (height, borderRadius и т.д.)

Events

Event	Type	Description
update:modelValue	(value: string) => void	Цвет изменён
change	(value: string) => void	Цвет изменён