Usage
Use the v-model directive to control the value of the ColorPicker.
{
"wait": "Loading client-side content..."
}Use the default-value prop to set the initial value when you do not need to control its state.
{
"wait": "Loading client-side content..."
}RGB Format
Use the format prop to set rgb value of the ColorPicker.
{
"wait": "Loading client-side content..."
}HSL Format
Use the format prop to set hsl value of the ColorPicker.
{
"wait": "Loading client-side content..."
}CMYK Format
Use the format prop to set cmyk value of the ColorPicker.
{
"wait": "Loading client-side content..."
}CIELab Format
Use the format prop to set lab value of the ColorPicker.
{
"wait": "Loading client-side content..."
}Throttle
Use the throttle prop to set the throttle value of the ColorPicker.
{
"wait": "Loading client-side content..."
}Size
Use the size prop to set the size of the ColorPicker.
{
"wait": "Loading client-side content..."
}Disabled
Use the disabled prop to disable the ColorPicker.
{
"wait": "Loading client-side content..."
}Examples
As a Color chooser
Use a Button and a Popover component to create a color chooser.
API
Props
Emits
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
colorPicker: {
slots: {
root: 'data-[disabled]:opacity-30',
picker: 'flex gap-4',
selector: 'rounded-(--ui-border-radius-md) touch-none',
selectorBackground: 'w-full h-full relative rounded-(--ui-border-radius-md)',
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--ui-color-base-white-fixed) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
track: 'w-[8px] relative rounded-(--ui-border-radius-md) touch-none',
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--ui-color-base-white-fixed) cursor-pointer data-[disabled]:cursor-not-allowed'
},
variants: {
size: {
xs: {
selector: 'w-[152px] h-[152px]',
track: 'h-[152px]'
},
sm: {
selector: 'w-[160px] h-[160px]',
track: 'h-[160px]'
},
md: {
selector: 'w-[168px] h-[168px]',
track: 'h-[168px]'
},
lg: {
selector: 'w-[176px] h-[176px]',
track: 'h-[176px]'
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
colorPicker: {
slots: {
root: 'data-[disabled]:opacity-30',
picker: 'flex gap-4',
selector: 'rounded-(--ui-border-radius-md) touch-none',
selectorBackground: 'w-full h-full relative rounded-(--ui-border-radius-md)',
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--ui-color-base-white-fixed) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
track: 'w-[8px] relative rounded-(--ui-border-radius-md) touch-none',
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--ui-color-base-white-fixed) cursor-pointer data-[disabled]:cursor-not-allowed'
},
variants: {
size: {
xs: {
selector: 'w-[152px] h-[152px]',
track: 'h-[152px]'
},
sm: {
selector: 'w-[160px] h-[160px]',
track: 'h-[160px]'
},
md: {
selector: 'w-[168px] h-[168px]',
track: 'h-[168px]'
},
lg: {
selector: 'w-[176px] h-[176px]',
track: 'h-[176px]'
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
})
]
})