Use the v-model directive to control the value of the ColorPicker.
<script setup lang="ts">
const value = ref('#00C16A')
</script>
<template>
<PColorPicker v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PColorPicker default-value="#00BCD4" />
</template>
Use the format prop to set rgb value of the ColorPicker.
<script setup lang="ts">
const value = ref('rgb(0, 193, 106)')
</script>
<template>
<PColorPicker format="rgb" v-model="value" />
</template>
Use the format prop to set hsl value of the ColorPicker.
<script setup lang="ts">
const value = ref('hsl(153, 100%, 37.8%)')
</script>
<template>
<PColorPicker format="hsl" v-model="value" />
</template>
Use the format prop to set cmyk value of the ColorPicker.
<script setup lang="ts">
const value = ref('cmyk(100%, 0%, 45.08%, 24.31%)')
</script>
<template>
<PColorPicker format="cmyk" v-model="value" />
</template>
Use the format prop to set lab value of the ColorPicker.
<script setup lang="ts">
const value = ref('lab(68.88% -60.41% 32.55%)')
</script>
<template>
<PColorPicker format="lab" v-model="value" />
</template>
Use the throttle prop to set the throttle value of the ColorPicker.
<script setup lang="ts">
const value = ref('#00C16A')
</script>
<template>
<PColorPicker :throttle="100" v-model="value" />
</template>
Use the size prop to set the size of the ColorPicker.
<template>
<PColorPicker size="xl" />
</template>
Use the disabled prop to disable the ColorPicker.
<template>
<PColorPicker disabled />
</template>
Use a Button and a Popover component to create a color chooser.
<script setup lang="ts">
import { computed, ref } from 'vue';
const color = ref('#00C16A');
const chip = computed(() => ({ backgroundColor: color.value }));
</script>
<template>
<PPopover>
<PButton
label="Choose color"
color="neutral"
variant="outline"
>
<template #leading>
<span
:style="chip"
class="rounded-full size-3"
/>
</template>
</PButton>
<template #content>
<PColorPicker
v-model="color"
class="p-2"
/>
</template>
</PPopover>
</template>
| Prop | Default | Type |
|---|
| Event | Type |
|---|
Below is the theme configuration skeleton for the PColorPicker. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
colorPicker: {
slots: {
root: '',
picker: '',
selector: '',
selectorBackground: '',
selectorThumb: '',
track: '',
trackThumb: ''
},
variants: {
size: {
xs: {
selector: '',
track: ''
},
sm: {
selector: '',
track: ''
},
md: {
selector: '',
track: ''
},
lg: {
selector: '',
track: ''
},
xl: {
selector: '',
track: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
colorPicker: {
slots: {
root: '',
picker: '',
selector: '',
selectorBackground: '',
selectorThumb: '',
track: '',
trackThumb: ''
},
variants: {
size: {
xs: {
selector: '',
track: ''
},
sm: {
selector: '',
track: ''
},
md: {
selector: '',
track: ''
},
lg: {
selector: '',
track: ''
},
xl: {
selector: '',
track: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
};