Color Picker

To'yinganlik paneli, rang ohangi slayderi, alfa slayderi, hex kiritish va oldindan tayyorlangan ranglarga ega rang tanlagich.

#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

Trigger balandligi, border-radius yoki istalgan uslubni moslashtirish uchun triggerClass va triggerStyle dan foydalaning.

#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'	Rang qiymati (v-model)
format	'hex' | 'rgb' | 'hsl'	'hex'	Chiqish formati
disabled	boolean	false	Tanlagichni o'chirish
showAlpha	boolean	false	Alfa slayderini ko'rsatish
showInput	boolean	true	Hex kiritishni ko'rsatish
presets	string[]	—	Oldindan tayyorlangan rang namunalari
size	'sm' | 'default' | 'lg'	'default'	Trigger o'lchami
triggerClass	string | string[] | Record<string, boolean>	''	Triggerdagi moslashtirilgan CSS klassi
triggerStyle	Record<string, string>	—	Triggerdagi inline stillar (height, borderRadius va h.k.)

Events

Event	Type	Description
update:modelValue	(value: string) => void	Rang o'zgardi
change	(value: string) => void	Rang o'zgardi