ColorPicker

A color picker component.

Use the v-model directive to control the value of the ColorPicker.

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <B24ColorPicker v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <B24ColorPicker default-value="#00BCD4" />
</template>

RGB Format

Use the format prop to set rgb value of the ColorPicker.

<script setup lang="ts">
const value = ref('rgb(0, 193, 106)')
</script>

<template>
  <B24ColorPicker format="rgb" v-model="value" />
</template>

HSL Format

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>
  <B24ColorPicker format="hsl" v-model="value" />
</template>

CMYK Format

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>
  <B24ColorPicker format="cmyk" v-model="value" />
</template>

CIELab Format

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>
  <B24ColorPicker format="lab" v-model="value" />
</template>

Throttle

Use the throttle prop to set the throttle value of the ColorPicker.

throttle

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <B24ColorPicker :throttle="100" v-model="value" />
</template>

Size

Use the size prop to set the size of the ColorPicker.

size

<template>
  <B24ColorPicker size="lg" />
</template>

Disabled

Use the disabled prop to disable the ColorPicker.

disabled

<template>
  <B24ColorPicker disabled />
</template>

Examples

As a Color chooser

Use a Button and a Popover component to create a color chooser.

<script setup lang="ts">
const color = ref('#00C16A')

const chip = computed(() => ({ backgroundColor: color.value }))
</script>

<template>
  <B24Popover>
    <B24Button label="Choose color">
      <template #leading>
        <span :style="chip" class="size-3 rounded-full" />
      </template>
    </B24Button>

    <template #content>
      <B24ColorPicker v-model="color" class="p-2" />
    </template>
  </B24Popover>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`throttle`	`50`	`number` Throttle time in ms for the color picker
`disabled`		`boolean` Disable the color picker
`defaultValue`	`'#FFFFFF'`	`string` The default value of the color picker
`format`	`'hex'`	`"hex" \| "rgb" \| "hsl" \| "cmyk" \| "lab"` Format of the color
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg"`
`modelValue`		`string`
`b24ui`		`{ root?: ClassNameValue; picker?: ClassNameValue; selector?: ClassNameValue; selectorBackground?: ClassNameValue; selectorThumb?: ClassNameValue; track?: ClassNameValue; trackThumb?: ClassNameValue; }`

Emits

Event	Type
`update:modelValue`	`[value: string \| undefined]`

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'
          }
        }
      }
    })
  ]
})

CheckboxGroup

Multi-select checklist using button controls.

FileUpload

A file upload input component.